/* ============ Vera Studio · V8 (refonte homepage style tmoo, palette light+bleu) ============ */

/* ============ PRELOADER (2s) ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  animation: preloaderFadeIn 0.5s var(--ease-out) both;
}
.preloader-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
}
.preloader-dot { color: var(--accent); }
.preloader-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  animation: preloaderTagFade 0.6s var(--ease-out) 0.5s both;
}
@keyframes preloaderFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes preloaderTagFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 0.1s linear, visibility 0.1s linear; }
  .preloader-inner, .preloader-tag { animation: none; }
}

/* ============ HEADER SMART-HIDE ============ */
.header--v8 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition: transform 0.35s var(--ease-out), background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  background: transparent;
}
.header--v8.is-scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
.header--v8.is-hidden {
  transform: translateY(-110%);
}

/* ============ HERO V8 ============ */
.hero-v8 {
  position: relative;
  padding: 130px var(--gut) var(--sp-24);
  overflow: hidden;
  text-align: center;
}
.hero-v8-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: var(--sp-16);
}
.hero-v8-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1.8rem + 6.8vw, 7rem);
  line-height: 1.0;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0 auto var(--sp-8);
  max-width: 22ch;
}
.hero-v8-title .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.hero-v8-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.05rem);
  color: var(--text-dim);
  letter-spacing: 0.02em;
  max-width: 640px;
  margin: 0 auto var(--sp-10);
  line-height: 1.6;
}
.hero-v8-ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}
.hero-v8-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--br-pill);
  background: color-mix(in oklab, var(--bg-elev) 60%, transparent);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  max-width: 100%;
}
.hero-v8-badge svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--accent);
}

/* ---- Bandeau 4 vignettes qui défilent ---- */
.hero-strip {
  overflow: hidden;
  margin: 0 calc(var(--gut) * -1) var(--sp-8);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.hero-strip-track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: heroStripSlide 42s linear infinite;
}
.hero-thumb {
  flex: 0 0 auto;
  width: 260px;
  transition: transform 0.4s var(--ease-out);
}
.hero-thumb:hover { transform: translateY(-4px) scale(1.02); }
@keyframes heroStripSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-strip-track { animation: none; }
}

/* ============ MOCKUPS (générique, réutilisable partout) ============ */
.mockup {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--br-lg);
  padding: 8px;
  box-shadow: 0 12px 32px -12px rgba(20, 20, 20, 0.18);
  border: 1px solid var(--line);
}
.mockup--sm { padding: 6px; border-radius: 12px; }
.mockup--lg { padding: 10px; border-radius: 22px; }
.mockup--fill { padding: 10px; border-radius: 22px; height: 100%; }
.mockup-frame {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--bg-soft) 90%, var(--accent) 8%));
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
.mockup--sm .mockup-frame { min-height: 130px; }
.mockup--lg .mockup-frame { min-height: 380px; }
.mockup--fill .mockup-frame { min-height: 100%; height: 100%; }

.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-elev) 96%, transparent);
}
.mockup-topbar > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--text) 22%, transparent);
}
.mockup-topbar > span:first-child { background: #E76F51; }
.mockup-topbar > span:nth-child(2) { background: #E9C46A; }
.mockup-topbar > span:nth-child(3) { background: #2A9D8F; }
.mockup-topbar .mockup-url {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  padding: 3px 10px;
  border-radius: var(--br-pill);
  white-space: nowrap;
  border: 1px solid var(--line);
}
.mockup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-6);
  text-align: center;
}
.mockup-body--lg { gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); }
.mockup-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.mockup--sm .mockup-brand { font-size: 1rem; }
.mockup-desc {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 32ch;
}
.mockup--sm .mockup-desc { font-size: 11px; }
.mockup-cta {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--br-pill);
  background: var(--accent);
  color: var(--bg-elev);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
:root[data-theme="dark"] .mockup-cta { color: var(--bg); }

/* Ancien style pour Avant */
.mockup-topbar--old > span:first-child { background: #999; }
.mockup-topbar--old > span:nth-child(2) { background: #999; }
.mockup-topbar--old > span:nth-child(3) { background: #999; }
.mockup-body--old {
  background: #FFFFFF;
  color: #333;
  align-items: flex-start;
  text-align: left;
}
.mockup-brand-old {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #003366;
}
.mockup-desc-old {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #666;
}
.mockup-tag-old {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #0055AA;
  text-decoration: underline;
  margin-top: var(--sp-4);
}

/* ============ PHONE OVERLAY ============ */
.mockup-phone {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 22%;
  min-width: 130px;
  max-width: 190px;
  z-index: 3;
  transition: transform 0.5s var(--ease-out);
}
.mockup-phone-frame {
  aspect-ratio: 9 / 18;
  background: #111;
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.5);
  position: relative;
}
.mockup-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 18px;
  background: #111;
  border-radius: 12px;
  z-index: 2;
}
.mockup-phone-body {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklab, var(--bg-soft) 90%, var(--accent) 12%));
  border-radius: 18px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  overflow: hidden;
}
.mockup-phone-body .mockup-brand {
  font-size: 1rem;
  text-align: center;
}
.work-card:hover .mockup-phone {
  transform: translateY(-6px) rotate(-2deg);
}

/* ============ MARQUEE PROMESSES ============ */
.promises-marquee {
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.promises-track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  animation: promisesSlide 38s linear infinite;
}
.promises-item {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.8rem + 1.4vw, 1.75rem);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.promises-sep {
  color: var(--accent);
  font-size: 1.25rem;
  opacity: 0.7;
}
@keyframes promisesSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .promises-track { animation: none; }
}

/* ============ WORKS (réalisations style tmoo) ============ */
.works {
  padding: var(--sec-y) var(--gut);
  max-width: var(--wrap-max);
  margin: 0 auto;
}
.works-head {
  max-width: 780px;
  margin: 0 auto var(--sp-16);
  text-align: center;
}
.works-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.works-head p {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  margin: 0;
}

.work-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-12);
  align-items: center;
  margin-bottom: var(--sp-20);
}
.work-card--reverse { grid-template-columns: 1fr 1.4fr; }
.work-card--reverse .work-mockup { order: 2; }
.work-card--reverse .work-meta { order: 1; }

.work-mockup {
  position: relative;
  padding-right: 30px;
  padding-bottom: 40px;
}
.work-card--reverse .work-mockup {
  padding-right: 0;
  padding-left: 30px;
}
.work-card--reverse .mockup-phone {
  right: auto;
  left: -20px;
}
.work-card--reverse:hover .mockup-phone {
  transform: translateY(-6px) rotate(2deg);
}
.work-domain {
  position: absolute;
  top: -22px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  z-index: 4;
  box-shadow: 0 4px 12px -4px rgba(20, 20, 20, 0.12);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease-out);
}
.work-domain svg { width: 12px; height: 12px; }
.work-domain:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.work-badge {
  position: absolute;
  left: 20px;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--bg-elev);
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 6px 16px -4px var(--accent-glow);
}
:root[data-theme="dark"] .work-badge { color: var(--bg); }

.work-meta h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.work-meta p {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin: 0;
}

.works-cta {
  text-align: center;
  margin-top: var(--sp-8);
}

@media (max-width: 900px) {
  .work-card, .work-card--reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
  }
  .work-card--reverse .work-mockup { order: 0; padding-left: 0; }
  .work-card--reverse .work-meta { order: 0; }
  .work-card--reverse .mockup-phone { left: auto; right: -20px; }
  .work-mockup { padding-right: 20px; padding-bottom: 30px; }
}

/* ============ SIGNATURE ============ */
.signature {
  padding: var(--sec-y) var(--gut);
  background: var(--bg-soft);
}
.signature-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.signature .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.signature h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-6);
  max-width: 24ch;
}
.signature-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 var(--sp-16);
}
.signature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}
.signature-list > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.signature-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  padding-top: 6px;
}
.signature-list h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.02em;
}
.signature-list p {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .signature-list { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ============ MÉTHODE (double validation) ============ */
.method {
  padding: var(--sec-y) var(--gut);
}
.method-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.method .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.method h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-6);
}
.method-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 var(--sp-16);
}
.method-echo {
  padding: var(--sp-8);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--br-md);
}
.method-echo p {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0;
}
.method-echo strong { color: var(--accent); }

/* ============ V8.19 · METHODE V3 · timeline de paiement ============ */
/* Regle de paiement : deux segments, le gratuit domine visuellement */
.method--v3 .method-ruler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: var(--sp-10) 0 var(--sp-12);
  border-radius: var(--br-pill);
  overflow: hidden;
  background: var(--line);
  padding: 4px;
}
.method--v3 .mr-seg {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--br-pill);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.method--v3 .mr-seg--free {
  background: var(--bg-elev);
  border: 1px dashed color-mix(in oklab, var(--text) 25%, transparent);
}
.method--v3 .mr-seg--paid {
  background: var(--accent);
  border: 1px solid var(--accent);
}
.method--v3 .mr-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.method--v3 .mr-seg--free .mr-amount { color: var(--text); }
.method--v3 .mr-seg--paid .mr-amount { color: #FFFFFF; }
/* En sombre l'accent devient clair : on repasse le texte en fonce pour le contraste */
:root[data-theme="dark"] .method--v3 .mr-seg--paid .mr-amount { color: var(--bg); }
:root[data-theme="dark"] .method--v3 .mr-seg--paid .mr-label {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}
:root[data-theme="dark"] .method--v3 .mt-cost--paid { color: var(--bg); }
:root[data-theme="dark"] .method--v3 .mt-step--paid .mt-marker { color: var(--bg); }
.method--v3 .mr-label {
  font-size: 0.85rem;
  line-height: 1.35;
}
.method--v3 .mr-seg--free .mr-label { color: var(--text-dim); }
.method--v3 .mr-seg--paid .mr-label { color: color-mix(in srgb, #FFFFFF 80%, transparent); }

/* Timeline */
.method--v3 .method-timeline {
  list-style: none;
  margin: 0 0 var(--sp-12);
  padding: 0;
  position: relative;
}
/* La ligne verticale qui relie les jalons */
.method--v3 .method-timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--text) 22%, transparent) 0%,
    color-mix(in oklab, var(--text) 22%, transparent) 42%,
    var(--accent) 52%,
    var(--accent) 100%
  );
}
.method--v3 .mt-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding-bottom: var(--sp-10);
}
.method--v3 .mt-step:last-child { padding-bottom: 0; }

/* Pastille numerotee posee sur la ligne */
.method--v3 .mt-marker {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.method--v3 .mt-step--free .mt-marker {
  background: var(--bg-elev);
  border: 2px dashed color-mix(in oklab, var(--text) 28%, transparent);
  color: var(--text-dim);
}
.method--v3 .mt-step--paid .mt-marker {
  background: var(--accent);
  border: 2px solid var(--accent);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.method--v3 .mt-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.method--v3 .mt-body { padding-top: 2px; min-width: 0; }
.method--v3 .mt-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.method--v3 .mt-when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.method--v3 .mt-cost {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--br-pill);
  white-space: nowrap;
}
.method--v3 .mt-cost--free {
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text-dim);
  border: 1px dashed color-mix(in oklab, var(--text) 25%, transparent);
}
.method--v3 .mt-cost--paid {
  background: var(--accent);
  color: #FFFFFF;
}
.method--v3 .mt-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.method--v3 .mt-body p {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
}

/* Le pivot : le moment ou le client decide */
.method--v3 .mt-pivot {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-10);
}
.method--v3 .mt-pivot-inner {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--br-md);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.method--v3 .mt-pivot-inner svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.method--v3 .mt-pivot-inner strong { color: var(--accent); }

/* ============ AVANT / APRÈS SLIDER ============ */
.before-after {
  padding: var(--sec-y) var(--gut);
  background: var(--bg-soft);
}
.before-after-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.before-after .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.before-after h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.ba-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-10);
}
.ba-slider {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 1000px;
  margin: 0 auto var(--sp-6);
  border-radius: var(--br-xl);
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  --slider-pos: 50%;
  box-shadow: 0 24px 60px -30px rgba(20, 20, 20, 0.35);
}
.ba-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
.ba-image .mockup { height: 100%; }
.ba-after {
  clip-path: inset(0 0 0 var(--slider-pos));
}
.ba-label {
  position: absolute;
  top: var(--sp-6);
  padding: 8px 16px;
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ba-label--before {
  left: var(--sp-6);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ba-label--after {
  right: var(--sp-6);
  background: var(--accent);
  color: var(--bg-elev);
}
:root[data-theme="dark"] .ba-label--after { color: var(--bg); }
.ba-handle {
  position: absolute;
  top: 0;
  left: var(--slider-pos);
  width: 4px;
  height: 100%;
  background: var(--accent);
  transform: translateX(-50%);
  z-index: 5;
  cursor: ew-resize;
}
.ba-handle-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, white, transparent);
  opacity: 0.5;
}
.ba-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px var(--accent-glow), 0 0 0 6px color-mix(in oklab, var(--bg) 90%, transparent);
  transition: transform 0.2s var(--ease-out);
}
:root[data-theme="dark"] .ba-handle-grip { color: var(--bg); }
.ba-handle:hover .ba-handle-grip { transform: translate(-50%, -50%) scale(1.08); }
.ba-handle-grip svg { width: 22px; height: 22px; }
.ba-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ============ OFFRE ============ */
.offer {
  padding: var(--sec-y) var(--gut);
}
.offer-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.offer .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.offer h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.offer-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--sp-16);
}

.offer-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-xl);
  padding: var(--sp-12);
  box-shadow: 0 24px 60px -30px rgba(20, 20, 20, 0.15);
  margin-bottom: var(--sp-12);
}
.offer-card-head { text-align: center; margin-bottom: var(--sp-8); }
.offer-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.offer-card-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.offer-desc {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  max-width: 55ch;
  margin: 0 auto;
}
.offer-price {
  text-align: center;
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-10);
}
.offer-price-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.offer-price-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-12);
}
.offer-meta-item {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--br-pill);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.offer-meta-item strong { color: var(--accent); font-weight: 600; }
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}
.offer-col h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-6);
  font-weight: 600;
}
.offer-options-title { margin-top: var(--sp-8); }
.offer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.offer-list > li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.offer-list--options > li,
.offer-col:last-child .offer-list:first-of-type > li {
  flex-direction: column;
  padding: var(--sp-4);
  background: var(--bg-soft);
  border-radius: var(--br-md);
  gap: 6px;
  align-items: flex-start;
}
.check {
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 auto;
}
.bonus-tag,
.option-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.bonus-tag { background: var(--accent-soft); color: var(--accent); }
.option-tag { background: color-mix(in oklab, var(--text) 10%, transparent); color: var(--text-dim); }
.bonus-desc {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: block;
}
.offer-cta {
  text-align: center;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.offer-cta-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .offer-card { padding: var(--sp-8); }
  .offer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.offer-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.offer-secondary-card {
  padding: var(--sp-8);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.offer-secondary-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.offer-secondary-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--text);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.02em;
}
.offer-secondary-card p {
  color: var(--text-dim);
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-4);
}
.offer-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.offer-secondary-cta svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .offer-secondary { grid-template-columns: 1fr; }
}

/* ============ FAQ ============ */
.faq {
  padding: var(--sec-y) var(--gut);
  background: var(--bg-soft);
}
.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}
.faq .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.faq h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-16);
  text-align: center;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-md);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  padding: var(--sp-6);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text);
  list-style: none;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out), background 0.25s ease;
}
.faq-icon svg { width: 16px; height: 16px; }
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: var(--accent);
  color: var(--bg-elev);
}
:root[data-theme="dark"] .faq-item[open] .faq-icon { color: var(--bg); }
.faq-answer {
  padding: 0 var(--sp-6) var(--sp-6);
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.65;
}
.faq-answer p { margin: 0; }

/* ============ CONTACT FINAL ============ */
.contact-final {
  padding: var(--sec-y) var(--gut);
}
.contact-final-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-final .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.contact-final h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.contact-final-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin: 0 0 var(--sp-10);
}
.contact-final-args {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-12);
  text-align: left;
  max-width: 620px;
  margin-inline: auto;
}
.contact-arg {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.4;
}
@media (max-width: 560px) {
  .contact-final-args { grid-template-columns: 1fr; }
}

.contact-final-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  text-align: left;
  padding: var(--sp-8);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-xl);
}
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-row--full { grid-column: 1 / -1; }
.cf-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.cf-row input,
.cf-row select,
.cf-row textarea {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--br-md);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cf-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.cf-disclaimer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* --- Legende obligatoire/facultatif --- */
.cf-legend {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.cf-legend .req-star { font-size: 12px; }

.cf-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}

/* --- Groupes numérotés dans le form --- */
.cf-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.cf-group:first-of-type { border-top: 0; padding-top: 0; }
.cf-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.cf-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
}
.cf-step-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cf-hint {
  font-family: var(--font-text);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Radios en pilules --- */
.cf-radio-row .cf-radio-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.cf-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.cf-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.cf-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cf-radio span {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cf-radio:hover span {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--text);
}
.cf-radio input[type="radio"]:checked + span {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.cf-radio input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Champ conditionnel (upload / URL) --- */
.cf-conditional[hidden] { display: none; }
.cf-conditional {
  animation: cfSlideDown 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cfSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Callout email (envoyer logo par mail) --- */
.cf-mail-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--br-md);
}
.cf-mail-callout svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}
.cf-mail-callout strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cf-mail-callout p {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.cf-mail-callout a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.cf-success-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
.cf-success-logo { margin: 0 0 var(--sp-5); }

.contact-final-alt {
  margin-top: var(--sp-8);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.contact-final-alt a { color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  .contact-final-form { grid-template-columns: 1fr; padding: var(--sp-6); }
}

/* ============ Ajustements globaux V8 ============ */
.btn-lg {
  padding: 16px 32px;
  font-size: var(--fs-base);
  border-radius: var(--br-pill);
}

/* Force la couleur du texte des boutons primaires en light (surchage) */
:root .btn-primary { color: #FFFFFF; }
:root[data-theme="dark"] .btn-primary { color: var(--bg); }
:root .btn-primary:hover { color: #FFFFFF; }
:root[data-theme="dark"] .btn-primary:hover { color: var(--bg); }

/* ============ PORTFOLIO OVERLAY (page /portfolio.html) ============ */
.portfolio-overlay .header--minimal {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--sp-4) var(--gut);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.35s var(--ease-out);
}
.portfolio-overlay .header--minimal.is-hidden { transform: translateY(-110%); }
.portfolio-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--br-pill);
  transition: color 0.2s ease, background 0.2s ease;
  justify-self: start;
}
.portfolio-back:hover {
  color: var(--text);
  background: var(--bg-soft);
}
.portfolio-back svg { width: 14px; height: 14px; }
.brand-logo--center { justify-self: center; }
.portfolio-overlay .header--minimal .header-cta { justify-self: end; }

.portfolio-hero {
  padding: 140px var(--gut) var(--sp-16);
  text-align: center;
}
.portfolio-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
.portfolio-hero .eyebrow { display: inline-block; margin-bottom: var(--sp-6); }
.portfolio-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0 0 var(--sp-6);
}
.portfolio-hero p {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 60ch;
}

.works--portfolio {
  padding-top: var(--sp-8);
}
.work-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-base);
  margin-top: var(--sp-4);
  transition: gap 0.25s var(--ease-out);
}
.work-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-out);
}
.work-link:hover { gap: 10px; }
.work-link:hover svg { transform: translateX(3px); }

.portfolio-cta {
  padding: var(--sec-y) var(--gut);
  background: var(--bg-soft);
  text-align: center;
}
.portfolio-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.portfolio-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.portfolio-cta p {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-8);
}

@media (max-width: 720px) {
  .portfolio-overlay .header--minimal {
    grid-template-columns: auto 1fr auto;
    padding: var(--sp-3) var(--sp-4);
  }
  .portfolio-back span { display: none; }
  .brand-logo--center { justify-self: center; font-size: 1rem; }
}

/* ============ V8.1 · FIX HERO STRIP (vignettes site réalistes) ============ */
.hero-thumb {
  width: 300px !important;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-elev);
  box-shadow: 0 20px 40px -20px rgba(20, 20, 20, 0.25);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-thumb .mockup, .hero-thumb .mockup-frame, .hero-thumb .mockup-body, .hero-thumb .mockup-topbar { display: none; }
.ht-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in oklab, var(--text) 96%, transparent);
  color: rgba(255,255,255,0.75);
  height: 24px;
  flex: 0 0 auto;
}
.ht-bar i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: block;
}
.ht-bar i:first-child { background: #FF5F57; }
.ht-bar i:nth-child(2) { background: #FEBC2E; }
.ht-bar i:nth-child(3) { background: #28C840; }
.ht-url {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.ht-inside {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 8px;
  position: relative;
}
.ht-nav {
  display: flex; justify-content: space-between; align-items: center;
}
.ht-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.ht-links {
  display: flex; gap: 5px;
}
.ht-links em {
  width: 14px; height: 3px; border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
  display: block;
}
.ht-hero {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
}
.ht-eyebrow {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.ht-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.8rem + 0.6vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ht-sub {
  font-size: 10px;
  line-height: 1.35;
  opacity: 0.75;
}
.ht-btn {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.ht-row {
  display: flex; gap: 5px;
  padding-top: 4px;
}
.ht-row span {
  flex: 1;
  height: 22px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.12;
  display: block;
}

/* Palettes par projet */
.hero-thumb--sable {
  background: linear-gradient(180deg, #F4E9D8 0%, #E8D9BF 100%);
  color: #4A3728;
}
.hero-thumb--sable .ht-btn { background: #4A3728; color: #F4E9D8; }
.hero-thumb--sable .ht-title { color: #2C1E12; }

.hero-thumb--bleu {
  background: linear-gradient(180deg, #DDEAF6 0%, #BCD4EC 100%);
  color: #1D3E5C;
}
.hero-thumb--bleu .ht-btn { background: #1D6FC4; color: #FFFFFF; }
.hero-thumb--bleu .ht-title { color: #0F2338; }

.hero-thumb--rose {
  background: linear-gradient(180deg, #F5E4E4 0%, #E8CDD1 100%);
  color: #6B2E36;
}
.hero-thumb--rose .ht-btn { background: #6B2E36; color: #F5E4E4; }
.hero-thumb--rose .ht-title { color: #3F1A20; }

.hero-thumb--encre {
  background: linear-gradient(180deg, #1B1F2A 0%, #0F131B 100%);
  color: #E9EBF0;
}
.hero-thumb--encre .ht-btn { background: #E9EBF0; color: #1B1F2A; }
.hero-thumb--encre .ht-title { color: #FFFFFF; }
.hero-thumb--encre .ht-links em, .hero-thumb--encre .ht-row span { background: #E9EBF0; }

@media (max-width: 640px) {
  .hero-thumb { width: 240px !important; }
}

/* ============ V8.1 · FIX BA LABELS toujours visibles ============ */
.ba-image .ba-label { display: none; }
.ba-slider > .ba-label {
  position: absolute;
  top: var(--sp-6);
  padding: 8px 16px;
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 6;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.ba-slider > .ba-label--before {
  left: var(--sp-6);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ba-slider > .ba-label--after {
  right: var(--sp-6);
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ============ V8.1 · OFFRE 3 CARTES CÔTE À CÔTE ============ */
.offer--v2 .offer-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.offer-plan {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.offer-plan:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(20,20,20,0.15);
}
.offer-plan--featured {
  background: linear-gradient(180deg, var(--bg-elev), color-mix(in oklab, var(--accent-soft) 60%, var(--bg-elev) 40%));
  border-color: var(--accent);
  position: relative;
}
.offer-plan--featured::before {
  content: "Le plus demandé";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--br-pill);
  white-space: nowrap;
}

.offer-plan-head { margin: 0; }
.offer-plan .offer-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.offer-plan h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.offer-plan-desc {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

.offer-plan-price {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.offer-plan-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 4px;
}
.offer-plan-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.offer-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.offer-plan-meta span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--br-pill);
  font-size: 11px;
  color: var(--text-dim);
}
.offer-plan-meta strong { color: var(--accent); font-weight: 600; }

.offer-plan h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}

.offer-plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-plan-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.offer-star-bonus {
  padding: var(--sp-5);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--br-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.star-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.offer-star-bonus strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.star-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.offer-plan-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offer-plan-options li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.45;
}
.option-pill {
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.offer-plan .btn-full {
  margin-top: auto;
  justify-content: center;
}

@media (max-width: 1000px) {
  .offer--v2 .offer-triptych { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ============ V8.1 · CONTACT FINAL 2 COLONNES ============ */
.contact-final--v2 .contact-final-inner {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
  text-align: left;
}
.contact-final--v2 .contact-final-side {
  position: sticky;
  top: 100px;
}
.contact-final--v2 h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}
.contact-final--v2 .contact-final-lead {
  color: var(--text-dim);
  font-size: var(--fs-lg);
  line-height: 1.55;
  margin: 0 0 var(--sp-8);
}
.contact-final--v2 .contact-final-args {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-8);
  max-width: none;
  text-align: left;
}
.contact-final--v2 .contact-arg {
  color: var(--text-dim);
  font-size: var(--fs-base);
}
.contact-final--v2 .contact-final-alt {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin: 0;
}
.contact-final--v2 .contact-final-alt a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.contact-final--v2 .contact-final-alt a:hover { text-decoration: underline; }

.contact-final--v2 .contact-final-form,
.contact-final--v2 .form-success {
  padding: var(--sp-8);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-xl);
}
.contact-final--v2 .contact-final-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact-final--v2 .cf-row--full { grid-column: auto; }
.contact-final--v2 .cf-actions { align-items: stretch; margin-top: var(--sp-2); }
.contact-final--v2 .cf-disclaimer { text-align: center; margin-top: var(--sp-3); }

@media (max-width: 900px) {
  /* minmax(0, 1fr) et pas 1fr : sinon la colonne prend la largeur min-content
     du formulaire (306px) et deborde de l'ecran sur un iPhone SE (320px). */
  .contact-final--v2 .contact-final-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }
  .contact-final--v2 .contact-final-side { position: static; }
  .contact-final--v2 .contact-final-side,
  .contact-final--v2 .contact-final-form-wrap { min-width: 0; }
  .contact-final--v2 .cf-row,
  .contact-final--v2 .cf-row input,
  .contact-final--v2 .cf-row select,
  .contact-final--v2 .cf-row textarea {
    min-width: 0;
    max-width: 100%;
  }
}

/* ============ V8.1 · BTN FULL utilitaire ============ */
.btn-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* ============ V8.3 · HERO TILES (style tmoo : browser + shot + rotation) ============ */
.hero-strip, .hero-strip-track { display: none; }

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: 960px;
  margin: 0 auto var(--sp-16);
  padding: 0 var(--gut);
  position: relative;
}

/* Une tuile = un mini-Chrome sur fond papier (decorative, non cliquable) */
.hero-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow:
    0 20px 40px -20px rgba(20, 20, 20, 0.22),
    0 2px 4px rgba(20, 20, 20, 0.04);
  text-decoration: none;
  color: inherit;
  cursor: default;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg));
  animation: heroTileFloat 4.8s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
  display: flex;
  flex-direction: column;
}
@keyframes heroTileFloat {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--tilt, 0deg)) translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tile { animation: none; }
}

/* --- Barre browser (top) --- */
.ht-browser {
  height: 30px;
  background: #F2F2F2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(20,20,20,0.06);
}
.ht-dots {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.ht-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DDD;
}
.ht-dots i:first-child { background: #FF5F57; }
.ht-dots i:nth-child(2) { background: #FEBC2E; }
.ht-dots i:nth-child(3) { background: #28C840; }
.ht-address {
  flex: 1;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(20,20,20,0.06);
}

/* --- Capture (bas) --- */
.ht-shot {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.ht-shot::after {
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: top center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Si les captures réelles existent, on les affiche par-dessus le fake */
.ht-shot[data-project="villa-nikkita"]::after {
  background-image: url("/assets/tiles/villa-nikkita-ordi.jpg");
}
.ht-shot[data-project="clair-net"]::after {
  background-image: url("/assets/tiles/clair-net-ordi.jpg");
}
.ht-shot[data-project="modevia"]::after {
  background-image: url("/assets/tiles/modevia-ordi.jpg");
}
.ht-shot[data-project="nathan-photo"]::after {
  background-image: url("/assets/tiles/nathan-photo-ordi.jpg");
}
.ht-shot.has-shot::after { opacity: 1; }

/* --- Fake shot riche (fallback qui ressemble à un vrai site) --- */
.tile-shot-fake {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  overflow: hidden;
}
.ts-pill {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.ts-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.65rem + 0.9vw, 1.15rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.ts-title em {
  font-style: italic;
  font-weight: 700;
}
.ts-lead {
  font-size: 9px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.75;
}
.ts-btn {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ts-grid {
  display: flex;
  gap: 4px;
  margin-top: auto;
}
.ts-grid span {
  flex: 1;
  height: 28px;
  border-radius: 4px;
  opacity: 0.15;
  background: currentColor;
}

/* ---- 4 palettes tmoo-like ---- */
.ts-villa {
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(74, 55, 40, 0.32), transparent 65%),
    linear-gradient(160deg, #E7D6BA 0%, #C9AB80 60%, #7C5D3E 100%);
  color: #241A10;
}
.ts-villa .ts-pill { background: rgba(36, 26, 16, 0.85); color: #F4E9D8; }
.ts-villa .ts-btn { background: #241A10; color: #F4E9D8; }
.ts-villa em { color: #7C4A20; }

.ts-clair {
  background:
    radial-gradient(ellipse 90% 60% at 30% 20%, rgba(29, 111, 196, 0.28), transparent 60%),
    linear-gradient(160deg, #EAF3FC 0%, #B8D4EF 100%);
  color: #0F2338;
}
.ts-clair .ts-pill { background: #1D6FC4; color: #FFFFFF; }
.ts-clair .ts-btn { background: #1D6FC4; color: #FFFFFF; }
.ts-clair em { color: #1D6FC4; }

.ts-modevia {
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(107, 46, 54, 0.25), transparent 60%),
    linear-gradient(160deg, #F5E4E4 0%, #DDB6BC 100%);
  color: #3F1A20;
}
.ts-modevia .ts-pill { background: #6B2E36; color: #F5E4E4; }
.ts-modevia .ts-btn { background: #6B2E36; color: #F5E4E4; }
.ts-modevia em { color: #6B2E36; font-family: Georgia, serif; }

.ts-nathan {
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #262B36 0%, #0F131B 100%);
  color: #E9EBF0;
}
.ts-nathan .ts-pill { background: rgba(233, 235, 240, 0.15); color: #E9EBF0; }
.ts-nathan .ts-btn { background: #E9EBF0; color: #0F131B; }
.ts-nathan em { color: #E9EBF0; font-family: Georgia, serif; opacity: 0.9; }

/* Une fois qu'un vrai shot est chargé, on masque le fake */
.ht-shot.has-shot .tile-shot-fake { opacity: 0; }

@media (max-width: 900px) {
  .hero-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 480px) {
  .hero-tiles { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .ht-browser { height: 24px; }
  .ht-address { font-size: 9px; padding: 2px 8px; }
}

/* ============ V8.2 · OFFRE PODIUM (site big center + 2 côtés compacts) ============ */
.offer--v3 .offer-triptych { display: none; }
.offer-podium {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

/* Cartes côté (gauche/droite) */
.offer-side {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.35s var(--ease-out);
}
.offer-side:hover { transform: translateY(-4px); }
.offer-side-inner {
  padding: var(--sp-8);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 380px;
  justify-content: space-between;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.offer-side:hover .offer-side-inner {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -24px rgba(20,20,20,0.15);
}
.offer-side-tag {
  display: inline-block;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text-dim);
  border-radius: var(--br-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
}
.offer-side h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.offer-side-desc {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.offer-side-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.offer-side-price strong {
  color: var(--accent);
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin-right: 4px;
}
.offer-side-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: gap 0.3s var(--ease-out);
}
.offer-side-cta svg { width: 14px; height: 14px; }
.offer-side:hover .offer-side-cta { gap: 10px; }

/* Carte centrale (site internet, la grande) */
.offer-center {
  background: linear-gradient(180deg, var(--bg-elev), color-mix(in oklab, var(--accent-soft) 45%, var(--bg-elev) 55%));
  border: 2px solid var(--accent);
  border-radius: var(--br-xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: relative;
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 32px 64px -30px var(--accent-glow), 0 12px 24px -12px rgba(20,20,20,0.15);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.offer-center:hover {
  transform: scale(1.04) translateY(-4px);
}
.offer-center-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--br-pill);
  white-space: nowrap;
  box-shadow: 0 8px 16px -4px var(--accent-glow);
}

.offer-center h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.offer-center .offer-plan-desc {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1000px) {
  .offer-podium {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .offer-center { transform: none; order: -1; }
  .offer-side-inner { min-height: 0; }
}

/* ============ V8.2 · SIGNATURE (présence digitale) 4 vignettes design ============ */
.signature--v2 .signature-list { display: none; }
.signature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.sig-card {
  padding: var(--sp-8);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--br-lg);
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
  transition: border-color 0.3s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}
.sig-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sig-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(20,20,20,0.15);
}
.sig-card:hover::before { opacity: 1; }

.sig-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s var(--ease-out), background 0.3s ease, color 0.3s ease;
}
.sig-icon svg { width: 28px; height: 28px; position: relative; z-index: 2; }
.sig-card:hover .sig-icon {
  background: var(--accent);
  color: #FFFFFF;
  transform: rotate(-4deg) scale(1.08);
}
:root[data-theme="dark"] .sig-card:hover .sig-icon { color: var(--bg); }

.sig-body { flex: 1; min-width: 0; position: relative; z-index: 2; }
.sig-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.sig-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.sig-body p {
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 720px) {
  .signature-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sig-card { padding: var(--sp-6); gap: var(--sp-4); }
  .sig-icon { width: 48px; height: 48px; }
  .sig-icon svg { width: 24px; height: 24px; }
}

/* ============ V8.4 · AVANT/APRÈS · vraie capture + site 2015 moche ============ */
.ba-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Site "AVANT" style 2015 WordPress générique nettoyage ---- */
.old-site {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  font-family: Arial, sans-serif;
  color: #333;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.4;
}

.old-header {
  background: #FFFFFF;
  border-bottom: 3px solid #FF0080;
}
.old-header-top {
  background: #FFDCEC;
  color: #C4006B;
  padding: 4px 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
}
.old-header-main {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #FFB3D9;
}
.old-logo {
  font-family: "Comic Sans MS", "Trebuchet MS", cursive;
  color: #FF0080;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #FFCCE0;
}
.old-nav {
  font-size: 11px;
  color: #333;
}
.old-nav a {
  color: #0066CC;
  text-decoration: underline;
  cursor: pointer;
}
.old-banner {
  padding: 24px 20px;
  background: linear-gradient(180deg, #FFB3D9 0%, #FFCCE5 100%);
  border-top: 1px solid #FF66B3;
  text-align: center;
  color: #4A0033;
  position: relative;
}
.old-slider-dots {
  font-size: 14px;
  color: #C4006B;
  margin-bottom: 6px;
  font-family: "Times New Roman", serif;
}
.old-banner-title {
  display: block;
  font-family: "Times New Roman", serif;
  font-size: 22px;
  font-weight: bold;
  color: #C4006B;
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.old-banner-sub {
  display: block;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #7A0044;
}

.old-content {
  flex: 1;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  background: #FFFFFF;
}
.old-col-main { min-width: 0; }
.old-h2 {
  font-family: "Times New Roman", serif;
  color: #C4006B;
  font-size: 18px;
  border-bottom: 2px dotted #FF66B3;
  padding-bottom: 4px;
  margin: 0 0 8px;
  font-weight: bold;
}
.old-p {
  font-size: 11px;
  color: #444;
  margin: 0 0 8px;
  text-align: justify;
}
.old-list {
  padding: 0;
  margin: 0 0 8px 8px;
  list-style: none;
  font-size: 11px;
  color: #444;
}
.old-list li { padding: 2px 0; }
.old-link {
  color: #0066CC;
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
}

.old-col-side { display: flex; flex-direction: column; gap: 10px; }
.old-widget {
  border: 1px solid #FF66B3;
  background: #FFF5FA;
}
.old-widget-title {
  background: #FF0080;
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
.old-widget-body {
  padding: 8px;
  font-size: 10px;
  color: #333;
  line-height: 1.5;
}

.old-footer {
  background: #C4006B;
  color: #FFCCE0;
  text-align: center;
  padding: 6px;
  font-size: 10px;
  border-top: 3px solid #660033;
}

/* Petit glow "clip parfait" pour le slider avant/après en mode Clair & Net */
.ba-slider { background: #F5F5F5; }

/* ============ V8.4 · WORKS · injection des vrais screenshots via data-project ============ */
.works .mockup-body[data-project],
.works .mockup-phone-body[data-project] {
  background-size: cover;
  background-position: top center;
  position: relative;
}

/* Cache le texte fake sous le screenshot */
.works .mockup-body[data-project]::before,
.works .mockup-phone-body[data-project]::before {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  z-index: 2;
  pointer-events: none;
}
.works .mockup-body[data-project] > *,
.works .mockup-phone-body[data-project] > * {
  position: relative;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
}

/* Villa Nikkita */
.work-card .mockup-body[data-project="Villa Nikkita"]::before {
  background-image: url("/assets/tiles/villa-nikkita-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Villa Nikkita"]::before {
  background-image: url("/assets/tiles/villa-nikkita-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* Clair & Net */
.work-card .mockup-body[data-project="Clair & Net"]::before {
  background-image: url("/assets/tiles/clair-net-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Clair & Net"]::before {
  background-image: url("/assets/tiles/clair-net-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* Modevia */
.work-card .mockup-body[data-project="Modevia"]::before {
  background-image: url("/assets/tiles/modevia-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Modevia"]::before {
  background-image: url("/assets/tiles/modevia-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* Nathan Photo */
.work-card .mockup-body[data-project="Nathan Photo"]::before {
  background-image: url("/assets/tiles/nathan-photo-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Nathan Photo"]::before {
  background-image: url("/assets/tiles/nathan-photo-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* ============ V8.5 · palette verte pour Comme une fleur + capture reelle ============ */
.hero-tile--verte {
  background: linear-gradient(180deg, #E8EFE5 0%, #C2D2B8 100%);
}
.ts-fleur {
  background:
    radial-gradient(ellipse 100% 70% at 30% 30%, rgba(255,180,180,0.28), transparent 60%),
    linear-gradient(160deg, #E9EFE4 0%, #A8BE9C 100%);
  color: #1F3D2C;
}
.ts-fleur .ts-pill { background: #1F3D2C; color: #E9EFE4; }
.ts-fleur .ts-btn { background: #1F3D2C; color: #E9EFE4; }
.ts-fleur em { color: #7A3B4A; font-family: Georgia, serif; font-style: italic; }

/* Charger la vraie capture Comme une fleur */
.ht-shot[data-project="comme-une-fleur"]::after {
  background-image: url("/assets/tiles/comme-une-fleur-ordi.jpg");
  background-size: cover;
  background-position: top center;
}

/* Comme une fleur · works portfolio */
.work-card .mockup-body[data-project="Comme une fleur"]::before {
  background-image: url("/assets/tiles/comme-une-fleur-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Comme une fleur"]::before {
  background-image: url("/assets/tiles/comme-une-fleur-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* Prospune · V8.8 · seconde application metier (SaaS) */
.work-card .mockup-body[data-project="Prospune"]::before {
  background-image: url("/assets/tiles/prospune-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Prospune"]::before {
  background-image: url("/assets/tiles/prospune-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* ============ V8.6 · Carte "Bientôt · Prospune" dans works ============ */
.works-soon {
  max-width: 880px;
  margin: var(--sp-14) auto 0;
  padding: var(--sp-8) var(--sp-8);
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(29, 111, 196, 0.06) 0%, rgba(29, 111, 196, 0.02) 100%),
    var(--surface);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.works-soon::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.works-soon-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.works-soon h4 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin: 0 0 var(--sp-3);
  color: var(--text);
  font-weight: 600;
}
.works-soon h4 strong { color: var(--accent); font-weight: 700; }
.works-soon p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .works-soon { padding: var(--sp-6) var(--sp-5); margin-top: var(--sp-10); }
  .works-soon h4 { font-size: 1.2rem; }
  .works-soon p { font-size: 0.95rem; }
}

/* ============================================================================
   V8.9 · Nouveaux screenshots (aperçus prospection) + design updates
   ============================================================================ */

/* --- Aperçus screenshots dans works portfolio --- */
.work-card .mockup-body[data-project="Franck Labasse"]::before {
  background-image: url("/assets/tiles/franck-labasse-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Franck Labasse"]::before {
  background-image: url("/assets/tiles/franck-labasse-mobile.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-body[data-project="Fromagerie Croûte"]::before {
  background-image: url("/assets/tiles/fromagerie-croute-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Fromagerie Croûte"]::before {
  background-image: url("/assets/tiles/fromagerie-croute-mobile.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-body[data-project="La Calèche"]::before {
  background-image: url("/assets/tiles/la-caleche-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="La Calèche"]::before {
  background-image: url("/assets/tiles/la-caleche-mobile.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-body[data-project="Villa Zenith"]::before {
  background-image: url("/assets/tiles/villa-zenith-ordi.jpg");
  background-size: cover;
  background-position: top center;
}
.work-card .mockup-phone-body[data-project="Villa Zenith"]::before {
  background-image: url("/assets/tiles/villa-zenith-mobile.jpg");
  background-size: cover;
  background-position: top center;
}

/* --- Bandeau promesses redesign (style tmoo : bande inclinée) --- */
.promises-band {
  position: relative;
  padding: var(--sp-12) 0;
  overflow: hidden;
  background: var(--bg);
}
.promises-band .promises-strip {
  position: relative;
  width: 120%;
  margin-left: -10%;
  overflow: hidden;
  padding: 18px 0;
  transform: rotate(-2deg);
  transform-origin: center;
}
.promises-band .promises-strip--dark {
  background: var(--text);
  color: var(--bg);
  z-index: 1;
}
.promises-band .promises-strip--accent {
  background: var(--accent);
  color: #fff;
  transform: rotate(1.5deg);
  margin-top: -22px;
  z-index: 2;
}
.promises-band .promises-track-2 {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
  animation: promisesSlide 42s linear infinite;
}
.promises-band .promises-strip--dark .promises-track-2 {
  animation-direction: reverse;
  animation-duration: 55s;
}
.promises-band .promises-item-2 {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.7rem + 0.9vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: uppercase;
}
.promises-band .promises-sep-2 {
  font-size: 1.1rem;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .promises-band .promises-track-2 { animation: none; }
}
@media (max-width: 720px) {
  .promises-band { padding: var(--sp-8) 0; }
  .promises-band .promises-strip { padding: 14px 0; }
}

/* --- Works head v3 : titre gauche + ghost text mobile au scroll --- */
.works-head--v3 {
  max-width: none;
  margin: 0 0 var(--sp-14);
  text-align: left;
  padding: 0 var(--gut);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.works-head--v3 .works-head-title h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0;
  max-width: 12ch;
  position: relative;
  z-index: 3;
}
.works-head--v3 .works-head-title h2 .accent {
  color: var(--accent);
  font-style: italic;
}
.works-head--v3 .works-head-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.works-head--v3 { isolation: isolate; }
.works-head--v3 .works-head-title { position: relative; z-index: 3; }
.works-head--v3 .works-ghost-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(4rem, 3rem + 8vw, 12rem);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 12%, transparent);
          text-stroke: 1.5px color-mix(in srgb, var(--text) 12%, transparent);
  white-space: nowrap;
  transform: translateX(var(--ghost-shift, 0));
  transition: transform 0.15s linear;
  will-change: transform;
  padding-right: 8vw;
}
@media (max-width: 720px) {
  .works-head--v3 { padding: 0 var(--gut); margin-bottom: var(--sp-8); }
  .works-head--v3 .works-ghost-text { font-size: 3.5rem; }
}

/* --- Signature v3 : 2 colonnes (texte gauche + dark box droite) --- */
.signature--v3 { padding: var(--sec-y) var(--gut); background: var(--bg); }
.signature--v3 .signature-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: start;
}
.signature--v3 .signature-left { position: sticky; top: 100px; }
.signature--v3 .signature-left .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-6);
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}
.signature--v3 .signature-left h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0 0 var(--sp-8);
}
.signature--v3 .signature-left h2 .u-accent {
  position: relative;
  display: inline;
  color: var(--accent);
  padding: 0 1px;
  background-image: linear-gradient(to right, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 1.1s cubic-bezier(0.65, 0, 0.15, 1);
}
.signature--v3 .signature-left h2.is-visible .u-accent,
.signature--v3 .signature-left h2 .u-accent.is-drawn {
  background-size: 100% 2px;
}
.signature--v3 .signature-left h2 .u-accent::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-4px, 50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}
.signature--v3 .signature-left h2.is-visible .u-accent::before,
.signature--v3 .signature-left h2 .u-accent.is-drawn::before {
  transform: translate(-4px, 50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .signature--v3 .signature-left h2 .u-accent {
    background-size: 100% 2px;
    transition: none;
  }
  .signature--v3 .signature-left h2 .u-accent::before {
    transform: translate(-4px, 50%) scale(1);
    transition: none;
  }
}
.signature--v3 .signature-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 var(--sp-8);
  max-width: 46ch;
}
.signature--v3 .signature-lead strong { color: var(--text); font-weight: 700; }
.signature--v3 .signature-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.signature--v3 .signature-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}
.signature--v3 .signature-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 2px solid var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6FC4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
:root[data-theme="dark"] .signature--v3 .signature-checks li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5D0F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.signature--v3 .signature-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
}
.signature--v3 .signature-more:hover { text-decoration-thickness: 3px; }

.signature--v3 .validation-box {
  background: var(--text);
  color: var(--bg);
  padding: clamp(var(--sp-8), 3vw, var(--sp-12));
  border-radius: 26px;
  position: relative;
}
:root[data-theme="dark"] .signature--v3 .validation-box {
  background: #0A0F1A;
  border: 1px solid rgba(255,255,255,0.08);
}
.signature--v3 .validation-tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.signature--v3 .validation-box h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 0.9rem + 1.8vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 var(--sp-6);
}
.signature--v3 .validation-box h3 .accent-soft {
  color: color-mix(in srgb, var(--accent) 65%, #fff);
}
:root[data-theme="dark"] .signature--v3 .validation-box h3 { color: #F7F5EE; }
:root[data-theme="dark"] .signature--v3 .validation-box h3 .accent-soft {
  color: color-mix(in srgb, var(--accent) 80%, #fff);
}
.signature--v3 .validation-box p {
  color: color-mix(in srgb, var(--bg) 75%, transparent);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 var(--sp-6);
}
.signature--v3 .validation-box .val-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, #fff);
}
@media (max-width: 900px) {
  .signature--v3 .signature-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .signature--v3 .signature-left { position: static; }
}

/* --- Hide the OLD signature-grid quand on utilise v3 --- */
.signature--v3 .signature-grid { display: none; }


/* ============================================================================
   V8.12 · RESPONSIVE iPhone COPIE FIDELE DE TMOO.SITE
   Approche : PAS DE CAROUSELS. Tout en stack vertical, compact et dense.
   Layout et proportions calques sur tmoo.site en 375x812.
   ============================================================================ */

/* --- Body / html : securite anti-overflow --- */
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
}

/* --- HEADER V8 mobile : logo compact, nav cachee, CTA masque --- */
@media (max-width: 900px) {
  .header--v8 {
    padding: 12px 16px;
    gap: 8px;
  }
  .header--v8 .brand-logo {
    font-size: 1.1rem;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }
  .header--v8 .nav { display: none; }
  .header--v8 .header-cta { gap: 6px; }
  .header--v8 .header-cta .btn { display: none; }
  .header--v8 .header-cta .theme-toggle { padding: 8px; }
  .header--v8 .burger { padding: 8px; }
}

/* --- HERO mobile : 4 tiles en RANGEE fixe, titre GROS, CTAs stack --- */
@media (max-width: 900px) {
  .hero-v8 {
    padding: calc(var(--sp-6) + 44px) 20px var(--sp-8);
    text-align: center;
  }
  .hero-v8-inner { padding-top: 0; }

  /* 4 tiles cote a cote, fixes, dans le viewport */
  .hero-tiles {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    max-width: 100% !important;
    margin: 0 auto var(--sp-8) !important;
    padding: 0 !important;
  }
  .hero-tile {
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2);
    overflow: hidden;
  }
  .hero-tile .ht-browser {
    padding: 4px 5px;
    gap: 3px;
  }
  .hero-tile .ht-dots i {
    width: 3px !important;
    height: 3px !important;
  }
  .hero-tile .ht-address {
    font-size: 6px !important;
    padding: 1px 3px !important;
  }
  .hero-tile .ts-pill,
  .hero-tile .ts-lead,
  .hero-tile .ts-btn,
  .hero-tile .ts-grid {
    display: none !important;
  }
  .hero-tile .ts-title {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    padding: 4px 4px !important;
  }
  .hero-tile .ht-shot {
    padding: 4px !important;
  }
  .hero-tile.has-shot .ht-shot::after {
    inset: 4px !important;
  }

  /* V8.17 · Titre du hero centré, mis en valeur comme desktop */
  .hero-v8-title {
    font-size: clamp(2.15rem, 9vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin: 0 auto var(--sp-4);
    max-width: 100%;
    padding: 0;
    text-align: center;
    text-wrap: balance;
  }
  .hero-v8-sub {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 auto var(--sp-6);
    text-align: center;
    padding: 0 6px;
    letter-spacing: 0;
    max-width: 100%;
    text-wrap: balance;
  }
  /* CTAs cote a cote sur mobile */
  .hero-v8-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    padding: 0;
    margin: 0 auto var(--sp-6);
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  .hero-v8-ctas .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    padding: 14px 10px;
    font-size: 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0;
  }
  .hero-v8-ctas .btn .arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .hero-v8-badge {
    font-size: 0.75rem;
    padding: 12px 18px;
    line-height: 1.45;
    border-radius: 22px;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
  }
}

/* --- BANDEAU PROMESSES mobile : meme design que desktop (2 bandes inclinees), typo ajustee --- */
@media (max-width: 900px) {
  .promises-band {
    padding: var(--sp-10) 0;
  }
  .promises-band .promises-strip {
    width: 130%;
    margin-left: -15%;
    padding: 12px 0;
  }
  .promises-band .promises-strip--accent {
    margin-top: -14px;
  }
  .promises-band .promises-track-2 {
    gap: var(--sp-4);
    animation-duration: 32s;
  }
  .promises-band .promises-strip--dark .promises-track-2 {
    animation-duration: 42s;
  }
  .promises-band .promises-item-2 {
    font-size: 0.82rem;
  }
  .promises-band .promises-sep-2 {
    font-size: 0.85rem;
  }
}

/* --- SECTION "LE TRAVAIL" mobile V8.16 : reproduction fidèle tmoo.site --- */
/* Poster card : navigateur + iPhone flottant + pill nom débordant en bas-gauche */
@media (max-width: 900px) {
  .works {
    padding: var(--sp-10) 18px calc(var(--sp-10) + 24px);
    max-width: 100%;
    overflow: visible;
  }
  .works-head--v3 {
    padding: 0;
    margin-bottom: var(--sp-8);
    text-align: left;
    min-height: auto;
    isolation: auto;
  }
  .works-head--v3 .works-head-title h2,
  .works-head--v3 h2 {
    font-size: 2.4rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
    max-width: 100%;
  }
  .works-head--v3 .works-head-ghost,
  .works-head--v3 #works-ghost,
  #works-ghost { display: none !important; }
  .works-head--v3 p,
  .works-head--v3 .works-head-hint {
    font-size: 0.98rem;
    color: var(--text-soft);
    margin-top: var(--sp-3);
    line-height: 1.45;
  }

  /* Track = stack vertical, gap large pour laisser les pills déborder */
  .works-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* Poster wrapper : positionne les débordements */
  .work-card,
  .work-card--reverse {
    display: block !important;
    grid-template-columns: none !important;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex: none !important;
    overflow: visible !important;
  }

  .work-card .work-mockup {
    position: relative;
    padding: 0;
    max-width: 100%;
    isolation: isolate;
  }

  /* Navigateur = carte blanche bordée noir, coins arrondis, ombre offset */
  .work-card .mockup,
  .work-card .mockup--lg {
    max-width: 100%;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
  }
  .work-card .mockup-frame {
    background: #fff !important;
    border: 2px solid var(--ink, #141414) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    aspect-ratio: 339 / 222;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.08);
    display: flex;
    flex-direction: column;
  }

  /* Barre navigateur : 3 pastilles + URL pill + flèche */
  .work-card .mockup-topbar {
    background: var(--paper-warm, #f5f2ea) !important;
    padding: 9px 12px !important;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(20, 20, 20, 0.06);
    flex: 0 0 auto;
  }
  .work-card .mockup-topbar > span:not(.mockup-url) {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #E85C33) !important;
  }
  .work-card .mockup-topbar > span:nth-child(2) {
    background: var(--accent, #E85C33) !important;
    opacity: 0.5;
  }
  .work-card .mockup-topbar > span:nth-child(3) {
    background: var(--accent, #E85C33) !important;
    opacity: 0.5;
  }
  .work-card .mockup-topbar .mockup-url {
    background: #fff !important;
    border: 1.5px solid var(--ink, #141414) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-family: var(--font-text, inherit);
    font-size: 0.72rem !important;
    font-weight: 600;
    color: var(--ink, #141414) !important;
    margin-left: 6px;
    max-width: 62%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Flèche ↗ à droite */
  .work-card .mockup-topbar::after {
    content: "↗";
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--ink, #141414);
    font-weight: 700;
    line-height: 1;
  }

  /* Corps = zone screenshot, remplit tout */
  .work-card .mockup-body,
  .work-card .mockup-body--lg {
    padding: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    background-size: cover !important;
    background-position: top center !important;
    min-height: 0 !important;
  }
  /* Masquer les faux textes (brand/desc/cta) sur mobile */
  .work-card .mockup-body .mockup-brand,
  .work-card .mockup-body .mockup-desc,
  .work-card .mockup-body .mockup-cta {
    display: none !important;
  }

  /* V8.18 · iPhone : proportions EXACTES du desktop, juste reduites.
     Reference desktop : largeur 168px, bezel 8px (4.76%), radius 26px (15.5%),
     notch 40% x 18px (10.7%) a 12px du haut (7.14%). Tout est exprime
     relativement a --ph-w pour que le rendu reste identique a l'echelle. */
  .work-card .mockup-phone {
    --ph-w: 96px;
    position: absolute !important;
    width: var(--ph-w) !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    top: auto !important;
    bottom: -14px !important;
    right: 8px !important;
    left: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3;
    transform: none !important;
  }
  .work-card--reverse .mockup-phone {
    left: auto !important;
    right: 8px !important;
  }
  /* Chassis : bezel noir, ratio 9/18, ombre portee comme desktop */
  .work-card .mockup-phone-frame {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 18 !important;
    background: #111 !important;
    padding: calc(var(--ph-w) * 0.0476) !important;
    border-radius: calc(var(--ph-w) * 0.155) !important;
    box-shadow: 0 calc(var(--ph-w) * 0.14) calc(var(--ph-w) * 0.28) calc(var(--ph-w) * -0.12) rgba(0, 0, 0, 0.5) !important;
    border: none !important;
    overflow: visible !important;
  }
  /* Notch large facon iPhone (40% de la largeur), pas une mini pilule */
  .work-card .mockup-phone-notch {
    display: block !important;
    position: absolute !important;
    top: calc(var(--ph-w) * 0.0714) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40% !important;
    height: calc(var(--ph-w) * 0.107) !important;
    background: #111 !important;
    border-radius: calc(var(--ph-w) * 0.0714) !important;
    z-index: 5 !important;
    padding: 0 !important;
    border: none !important;
  }
  .work-card .mockup-phone-body {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: top center !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: calc(var(--ph-w) * 0.107) !important;
    overflow: hidden !important;
  }
  .work-card .mockup-phone-body .mockup-brand,
  .work-card .mockup-phone-body > * {
    display: none !important;
  }

  /* Masquer badge et lien domaine (remplacés par la pill nom) */
  .work-card .work-domain,
  .work-card .work-badge { display: none !important; }

  /* Pill nom projet : déborde en bas-gauche, style tmoo tag2 */
  .work-card .work-meta {
    position: absolute !important;
    bottom: -16px !important;
    left: 12px !important;
    right: 105px !important;
    z-index: 4;
    padding: 8px 14px !important;
    background: var(--paper-warm, #f5f2ea) !important;
    border: 2px solid var(--ink, #141414) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.15);
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: nowrap;
    overflow: hidden;
    margin: 0 !important;
  }
  /* V8.16 : reverse gardait pill à droite, on unifie tout à gauche */
  .work-card--reverse .work-meta {
    left: 12px !important;
    right: 105px !important;
  }
  .work-card .work-meta h3 {
    display: inline !important;
    order: 1;
    font-family: var(--font-display, inherit);
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    color: var(--ink, #141414) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 0;
    min-width: 0;
  }
  .work-card .work-meta .work-kind {
    display: inline !important;
    order: 2;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    color: var(--text-soft, #9c9990) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    padding: 0 !important;
    background: none !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
  }
  /* Retirer le "◆ " du kicker sur mobile (juste "type" en muted) */
  .work-card .work-meta .work-kind::first-letter { font-size: 0; }
  .work-card .work-meta p,
  .work-card .work-meta .work-link {
    display: none !important;
  }

  /* CTA "Voir tout" en bas */
  .swipe-hint { display: none !important; }
  .works-cta { margin-top: var(--sp-10) !important; }
  .works-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 16px;
    border-radius: 999px;
  }

  /* Sécurité overflow pour laisser les débordements visibles */
  section.works,
  .works .container { overflow: visible !important; }
}

/* --- SIGNATURE V3 mobile : 1 colonne, checks orange ✓ (pas cercle) --- */
@media (max-width: 900px) {
  .signature--v3 { padding: var(--sp-10) 20px; }
  .signature--v3 .signature-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .signature--v3 .signature-left { position: static; }
  .signature--v3 .signature-left .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    margin-bottom: var(--sp-4);
  }
  .signature--v3 .signature-left h2 {
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-5);
  }
  .signature--v3 .signature-lead {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--sp-6);
  }
  .signature--v3 .signature-checks {
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }
  .signature--v3 .signature-checks li {
    font-size: 0.92rem;
    line-height: 1.5;
    gap: var(--sp-3);
  }
  /* Style tmoo : cochon orange simple (pas de cercle) */
  .signature--v3 .signature-checks li::before {
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6FC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 4px;
  }

  /* Validation box = full-width sous les checks */
  .signature--v3 .validation-box {
    padding: var(--sp-6) var(--sp-5);
    border-radius: 20px;
    margin-top: var(--sp-4);
  }
  .signature--v3 .validation-tag {
    font-size: 0.65rem;
    padding: 5px 10px;
    margin-bottom: var(--sp-4);
    letter-spacing: 0.14em;
  }
  .signature--v3 .validation-box h3 {
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-4);
  }
  .signature--v3 .validation-box p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: var(--sp-4);
  }
  .signature--v3 .validation-box .val-link {
    font-size: 0.85rem;
  }
}

/* --- BEFORE/AFTER slider mobile : format vertical --- */
@media (max-width: 900px) {
  .before-after { padding: var(--sp-10) 20px; }
  .before-after h2 {
    font-size: 1.9rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .before-after .ba-intro,
  .before-after .ba-note { font-size: 0.9rem; }
  /* V8.18 · le contenu est une capture de site en paysage : on garde le 16/10
     du desktop. Le forcer en 3/4 portrait ecrasait et recadrait l'image. */
  .ba-slider {
    aspect-ratio: 16 / 10 !important;
    border-radius: 14px;
    max-width: 100%;
    width: 100%;
  }
  /* Labels plus compacts et plus pres des bords */
  .ba-slider > .ba-label {
    font-size: 0.58rem !important;
    padding: 5px 10px !important;
    letter-spacing: 0.06em !important;
    top: 12px !important;
  }
  .ba-slider > .ba-label--before { left: 12px !important; }
  .ba-slider > .ba-label--after { right: 12px !important; }

  /* .ba-handle est la BARRE verticale : elle doit garder toute la hauteur.
     Seul .ba-handle-grip (le bouton rond) est reduit. */
  .ba-handle {
    width: 4px !important;
    height: 100% !important;
    top: 0 !important;
  }
  .ba-handle-grip {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 8px 20px -6px var(--accent-glow), 0 0 0 4px color-mix(in oklab, var(--bg) 90%, transparent) !important;
  }
  .ba-handle-grip svg { width: 17px !important; height: 17px !important; }
}

/* --- METHODE mobile : 1 colonne, stack simple --- */
@media (max-width: 900px) {
  .method--v2 { padding: var(--sp-10) 20px; }
  .method--v2 h2 {
    font-size: 1.9rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-4);
  }
  .method--v2 .method-lead {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--sp-6);
  }
  .method--v2 .method-echo {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
  }
  .method--v2 .method-echo p { font-size: 0.9rem; }

  /* --- V8.19 · METHODE V3 mobile : timeline compacte, memes proportions --- */
  /* Regle de paiement : les deux segments passent l'un sous l'autre */
  .method--v3 .method-ruler {
    grid-template-columns: 1fr;
    gap: 4px;
    margin: var(--sp-7) 0 var(--sp-9);
    border-radius: 20px;
  }
  .method--v3 .mr-seg {
    padding: var(--sp-4) var(--sp-5);
    border-radius: 16px;
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
  }
  .method--v3 .mr-amount { font-size: 1.15rem; }
  .method--v3 .mr-label { font-size: 0.78rem; flex: 1 1 100%; }

  /* Timeline : gouttiere reduite, ligne recalee sur la pastille */
  .method--v3 .method-timeline { margin-bottom: var(--sp-8); }
  .method--v3 .method-timeline::before {
    left: 17px;
    top: 10px;
    bottom: 10px;
  }
  .method--v3 .mt-step,
  .method--v3 .mt-pivot {
    grid-template-columns: 36px 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-7);
  }
  .method--v3 .mt-marker {
    width: 36px;
    height: 36px;
  }
  .method--v3 .mt-num { font-size: 0.72rem; }
  .method--v3 .mt-head {
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
  }
  .method--v3 .mt-when { font-size: 0.64rem; letter-spacing: 0.08em; }
  .method--v3 .mt-cost {
    font-size: 0.64rem;
    padding: 3px 8px;
  }
  .method--v3 .mt-body h3 {
    font-size: 1.05rem;
    line-height: 1.22;
    margin-bottom: var(--sp-2);
  }
  .method--v3 .mt-body p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-soft);
  }
  /* Le pivot prend toute la largeur pour ressortir */
  .method--v3 .mt-pivot { grid-template-columns: 1fr; }
  .method--v3 .mt-pivot-inner {
    grid-column: 1;
    padding: var(--sp-4);
    font-size: 0.88rem;
    line-height: 1.45;
    border-radius: 14px;
    gap: var(--sp-2);
  }
  .method--v3 .mt-pivot-inner svg { width: 17px; height: 17px; }
}

/* --- OFFRE mobile : 3 cartes stack, centre en premier --- */
@media (max-width: 900px) {
  .offer--v3 { padding: var(--sp-10) 20px; }
  .offer--v3 .offer-inner { padding: 0; }
  .offer--v3 h2 {
    font-size: 1.9rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-4);
  }
  .offer--v3 .offer-lead {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--sp-6);
  }
  .offer--v3 .offer-podium {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: column;
    gap: var(--sp-5);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }
  .offer--v3 .offer-center {
    order: 1;
    max-width: 100%;
    flex: none;
    scroll-snap-align: none;
    transform: none !important;
    padding: var(--sp-6) var(--sp-5) !important;
    border-radius: 20px;
  }
  .offer--v3 .offer-side {
    order: 2;
    max-width: 100%;
    flex: none;
    scroll-snap-align: none;
    padding: var(--sp-6) var(--sp-5) !important;
    border-radius: 20px;
  }
  .offer--v3 .offer-side:first-of-type { order: 2; }
  .offer--v3 .offer-side:last-of-type { order: 3; }

  .offer--v3 .offer-plan-head h3 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
  .offer--v3 .offer-plan-value { font-size: 1.6rem; }
  .offer--v3 .offer-plan-meta { flex-wrap: wrap; gap: 8px; }
  .offer--v3 .offer-plan-meta span { font-size: 0.75rem; }
  .offer--v3 .offer-plan-list li { font-size: 0.88rem; line-height: 1.5; }
  .offer--v3 .offer-side h3 { font-size: 1.2rem; }
  .offer--v3 .offer-side-desc { font-size: 0.85rem; line-height: 1.5; }
  .offer--v3 .offer-side-price { font-size: 0.8rem; }
  .offer--v3 .offer-side-cta { font-size: 0.85rem; }
  .offer--v3 .offer-star-bonus { padding: var(--sp-5); margin: var(--sp-5) 0; }
}

/* --- FAQ mobile --- */
@media (max-width: 900px) {
  .faq { padding: var(--sp-10) 20px; }
  .faq h2 {
    font-size: 1.9rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-6);
  }
  .faq-item summary { font-size: 0.95rem; padding: var(--sp-4) 0; }
  .faq-item p { font-size: 0.9rem; line-height: 1.6; }
}

/* --- CONTACT FINAL mobile (V8.22 · compact) ---
   Sur telephone la section faisait ~1400px de haut avec 640px avant le
   formulaire. On enleve tout ce qui est deja repete ailleurs (les 4
   arguments + la ligne SMS au-dessus du form, qui redisaient ce que
   la disclaimer sous le bouton dit deja) et on serre la gouttiere pour
   que le formulaire soit visible des qu'on arrive.                        */
@media (max-width: 900px) {
  .contact-final { padding: var(--sp-8) 20px var(--sp-10); }
  .contact-final .contact-final-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }

  /* Cote gauche : eyebrow, titre, une seule ligne d'accroche, c'est tout.
     Le gap du grid parent gere la respiration entre le bloc gauche et le
     formulaire ; les marges internes gerent celle entre eyebrow/h2/lead.  */
  .contact-final--v2 .contact-final-inner { gap: var(--sp-5); }

  .contact-final--v2 .eyebrow { margin-bottom: var(--sp-3); }
  .contact-final--v2 h2 {
    font-size: 1.9rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: var(--sp-3);
    text-wrap: balance;
  }
  .contact-final--v2 .contact-final-lead {
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--text-dim);
    margin: 0;
    max-width: 32ch;
  }

  /* Le rappel des 4 arguments et la ligne SMS d'appel disparaissent sur
     telephone : c'est deja porte par la disclaimer sous le bouton +
     une pastille compacte qu'on ajoute plus bas.                          */
  .contact-final--v2 .contact-final-args,
  .contact-final--v2 .contact-final-alt { display: none; }

  /* Le formulaire arrive juste apres le lead */
  .contact-final-form-wrap { margin-top: 0; }
  .contact-final-form {
    padding: var(--sp-5);
    border-radius: 20px;
    gap: var(--sp-3) !important;
  }
  .cf-row label { font-size: 0.8rem; margin-bottom: 4px; }
  .cf-row input, .cf-row select, .cf-row textarea {
    font-size: 16px;                     /* evite le zoom auto iOS */
    padding: 11px 13px;
    border-radius: 12px;
  }
  .cf-row textarea { min-height: 84px; }
  .cf-actions { margin-top: var(--sp-3); gap: var(--sp-2); }
  .cf-disclaimer { font-size: 0.72rem; line-height: 1.4; }

  /* Pastille "ou telephonez" : discrete, sous la disclaimer, seulement mobile */
  .cf-sms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: var(--sp-4) auto 0;
    padding: 10px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--br-pill);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    width: fit-content;
    max-width: 100%;
  }
  .cf-sms a { color: var(--accent); font-weight: 700; text-decoration: none; }
  .cf-sms svg { width: 14px; height: 14px; color: var(--accent); }
}
@media (min-width: 901px) {
  .cf-sms { display: none; }
}

/* --- FOOTER mobile (V8.23) : brand compacte, deux colonnes de liens,
   contact en pastilles, tout tient dans un ecran ---
   Avant : 834 px de footer, chaque lien pris dans une pile de flex-gap sp-3.
   Ici : brand en tete, description masquee (elle ne fait que redire ce que
   les colonnes disent), Services / Naviguer en deux colonnes cote a cote,
   Ecrire en pastilles horizontales, bas de page sur une seule ligne.       */
@media (max-width: 900px) {
  .site-footer { padding: var(--sp-6) 14px var(--sp-4); }

  .footer-grid {
    display: grid;
    grid-template-columns: 0.9fr 0.85fr 1.35fr;
    column-gap: 10px;
    row-gap: var(--sp-5);
    text-align: left;
    max-width: none;
    margin: 0;
  }

  /* Brand : plein largeur, centre, sans description qui redit les services */
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-brand h3 {
    font-size: 1.35rem;
    margin: 0;
  }
  .footer-brand p { display: none; }

  /* Trois colonnes uniformes : Services / Naviguer / Ecrire alignees */
  .footer-col { min-width: 0; }
  .footer-col h4 {
    margin: 0 0 var(--sp-2);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .footer-col ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .footer-col li, .footer-col a {
    font-size: 0.76rem;
    padding: 0;
    line-height: 1.35;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: inline-block;
    color: var(--text-dim);
    font-weight: 400;
    text-align: left;
    word-break: normal;
    overflow-wrap: normal;
  }
  .footer-col a { color: var(--text-dim); }
  .footer-col a[href^="mailto:"],
  .footer-col a[href^="tel:"] { color: var(--accent); font-weight: 500; }
  .footer-col:last-of-type { text-align: left; }
  .footer-col:last-of-type h4 { display: block; }
  /* Colonne Ecrire : tout tient sur une ligne, un peu plus petit pour que le mail rentre */
  .footer-col:last-of-type li,
  .footer-col:last-of-type a {
    font-size: 0.68rem;
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .footer-col:last-of-type a[href^="mailto:"] {
    letter-spacing: -0.01em;
  }

  /* Bas de page : compact, une seule ligne centree */
  .footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    padding-top: var(--sp-4);
    margin-top: var(--sp-5);
    text-align: center;
    font-size: 0.7rem;
  }
}

/* --- HEADER MINIMAL (pages secondaires) mobile --- */
@media (max-width: 900px) {
  .header--minimal {
    padding: 12px 16px;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .header--minimal .portfolio-back span { display: none; }
  .header--minimal .portfolio-back {
    padding: 6px;
    gap: 0;
  }
  .header--minimal .portfolio-back svg { width: 22px; height: 22px; }
  .header--minimal .brand-logo--center {
    font-size: 1rem;
    white-space: nowrap;
  }
  .header--minimal .theme-toggle { padding: 6px; }

  .portfolio-hero { padding: calc(var(--sp-10) + 20px) 20px var(--sp-8); }
  .portfolio-hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .portfolio-hero p { font-size: 0.95rem; line-height: 1.55; }
  .portfolio-cta { padding: var(--sp-10) 20px; }
  .portfolio-cta h2 {
    font-size: 1.9rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }
  .portfolio-cta p { font-size: 0.95rem; }
}

/* --- Service detail pages mobile --- */
@media (max-width: 900px) {
  .service-detail { padding: var(--sp-8) 20px; }
  .service-detail-block h2 {
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .service-detail-block h3 { font-size: 1.2rem; }
  .service-detail-block p { font-size: 0.95rem; line-height: 1.6; }
  .service-detail-block--highlight {
    padding: var(--sp-6) var(--sp-5);
    border-radius: 18px;
  }
  .skill-list-item h3 { font-size: 1.05rem; }
  .skill-list-item p { font-size: 0.9rem; line-height: 1.55; }
  .devis-band { padding: var(--sp-10) 20px; }
  .devis-band h2 { font-size: 1.9rem; letter-spacing: -0.03em; }
  .devis-band .devis-lead { font-size: 0.95rem; }
}

/* --- Portfolio page : garde le stack vertical (mockups en full width) --- */
@media (max-width: 900px) {
  .works--portfolio {
    padding: var(--sp-8) 20px;
  }
  .works--portfolio .work-card {
    display: block !important;
    margin-bottom: var(--sp-10) !important;
  }
}

/* --- Signal box (chef de projet page) mobile --- */
@media (max-width: 900px) {
  .signal-box-wrap { padding: var(--sp-6) 20px; }
  .signal-box { padding: var(--sp-5); border-radius: 16px; }
  .signal-box p { font-size: 0.9rem; line-height: 1.55; }
}

/* --- Prospune "bientot" callout mobile --- */
@media (max-width: 900px) {
  .works-soon {
    padding: var(--sp-6) var(--sp-5);
    border-radius: 20px;
  }
  .works-soon h4 { font-size: 1.15rem; }
  .works-soon p { font-size: 0.9rem; line-height: 1.55; }
}

/* ============ V8.20 · ANIMATIONS AU SCROLL ============ */
/* Trois briques :
   1. les mots des titres montent de derriere un masque
   2. les blocs de texte arrivent avec un leger flou qui se dissipe
   3. la timeline de la methode se dessine au rythme du scroll            */

/* ---- 1. Titres masques mot a mot ---- */
.rw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.16em 0 0.18em;
  margin: -0.16em 0 -0.18em;
}
.rw > i {
  display: inline-block;
  font-style: inherit;
}
/* Etat cache : uniquement une fois que le JS a fini de decouper */
.has-words.words-ready .rw > i {
  transform: translateY(108%);
  opacity: 0;
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.5s linear;
  transition-delay: var(--rw-d, 0s);
  /* Promu seulement tant que le mot n'a pas joue, puis relache */
  will-change: transform;
}
.has-words.words-ready.is-visible .rw > i {
  transform: translateY(0);
  opacity: 1;
  will-change: auto;
}
/* Le titre decoupe ne doit plus bouger lui-meme : ce sont les mots qui jouent */
.reveal.has-words {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ---- 2. Flou qui se dissipe sur les textes (desktop uniquement) ---- */
@media (min-width: 901px) {
  h2.reveal,
  h3.reveal,
  p.reveal,
  .eyebrow.reveal {
    filter: blur(6px);
    transition:
      opacity 0.9s var(--ease-out),
      transform 0.9s var(--ease-out),
      filter 0.9s var(--ease-out);
  }
  h2.reveal.is-visible,
  h3.reveal.is-visible,
  p.reveal.is-visible,
  .eyebrow.reveal.is-visible { filter: blur(0); }
}

/* L'eyebrow se resserre en arrivant */
.eyebrow.reveal {
  letter-spacing: 0.42em;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    letter-spacing 1s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.eyebrow.reveal.is-visible { letter-spacing: 0.14em; }

/* ============ V8.20 · METHODE · choregraphie ============ */

/* La regle de paiement : le gratuit se pose, puis le payant */
.method--v3 .method-ruler.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
.method--v3 .mr-seg {
  opacity: 0;
  transform: translateY(20px) scale(0.975);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.85s var(--ease-out);
}
.method--v3 .method-ruler.is-visible .mr-seg {
  opacity: 1;
  transform: none;
}
.method--v3 .method-ruler.is-visible .mr-seg--paid { transition-delay: 0.16s; }

/* La ligne verticale : une piste discrete + un trait qui se dessine au scroll */
.method--v3 .method-timeline::before {
  background: color-mix(in oklab, var(--text) 9%, transparent);
}
.method--v3 .method-timeline::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--text) 30%, transparent) 0%,
    color-mix(in oklab, var(--text) 30%, transparent) 42%,
    var(--accent) 52%,
    var(--accent) 100%
  );
  /* --mt-p va de 0 a 1, pilote par le scroll ; 1 par defaut si pas de JS */
  clip-path: inset(0 0 calc(100% - var(--mt-p, 1) * 100%) 0);
}

/* Les jalons : la pastille pop, puis le texte glisse ligne par ligne */
.method--v3 .mt-step.reveal,
.method--v3 .mt-pivot.reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
.method--v3 .mt-marker {
  opacity: 0;
  transform: scale(0.35);
  transition:
    opacity 0.35s var(--ease-soft),
    transform 0.75s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.method--v3 .mt-step.is-visible .mt-marker {
  opacity: 1;
  transform: scale(1);
}
/* Onde qui part de la pastille au moment ou elle se pose */
.method--v3 .mt-marker::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.method--v3 .mt-step--free .mt-marker::after {
  border-color: color-mix(in oklab, var(--text) 32%, transparent);
}
.method--v3 .mt-step--paid .mt-marker::after { border-color: var(--accent); }
.method--v3 .mt-step.is-visible .mt-marker::after {
  animation: mt-ring 1.2s var(--ease-out) 0.28s 1;
}
@keyframes mt-ring {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.95); }
}

.method--v3 .mt-head,
.method--v3 .mt-body h3,
.method--v3 .mt-body p {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.75s var(--ease-out);
}
.method--v3 .mt-step.is-visible .mt-head,
.method--v3 .mt-step.is-visible .mt-body h3,
.method--v3 .mt-step.is-visible .mt-body p {
  opacity: 1;
  transform: none;
}
.method--v3 .mt-step.is-visible .mt-head    { transition-delay: 0.14s; }
.method--v3 .mt-step.is-visible .mt-body h3 { transition-delay: 0.22s; }
.method--v3 .mt-step.is-visible .mt-body p  { transition-delay: 0.30s; }

/* Le pivot : le bloc arrive, puis la coche se trace */
.method--v3 .mt-pivot-inner {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.85s var(--ease-out);
}
.method--v3 .mt-pivot.is-visible .mt-pivot-inner {
  opacity: 1;
  transform: none;
}
.method--v3 .mt-pivot-inner svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.7s var(--ease-out) 0.4s;
}
.method--v3 .mt-pivot.is-visible .mt-pivot-inner svg path { stroke-dashoffset: 0; }

/* L'encadre final : le filet bleu se tire de haut en bas */
.method--v3 .method-echo {
  position: relative;
  border-left-color: transparent;
}
.method--v3 .method-echo::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.85s var(--ease-out) 0.15s;
}
.method--v3 .method-echo.is-visible::before { transform: scaleY(1); }

/* Mobile : la ligne dessinee suit la gouttiere reduite */
@media (max-width: 900px) {
  .method--v3 .method-timeline::after {
    left: 17px;
    top: 10px;
    bottom: 10px;
  }
}

/* ---- Accessibilite : on coupe tout si l'utilisateur le demande ---- */
@media (prefers-reduced-motion: reduce) {
  .has-words.words-ready .rw > i,
  .has-words.words-ready.is-visible .rw > i {
    transform: none;
    opacity: 1;
    transition: none;
  }
  h2.reveal, h3.reveal, p.reveal, .eyebrow.reveal { filter: none; }
  .eyebrow.reveal, .eyebrow.reveal.is-visible { letter-spacing: 0.14em; }
  .method--v3 .mr-seg,
  .method--v3 .mt-marker,
  .method--v3 .mt-head,
  .method--v3 .mt-body h3,
  .method--v3 .mt-body p,
  .method--v3 .mt-pivot-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .method--v3 .mt-step.is-visible .mt-marker::after { animation: none; }
  .method--v3 .mt-pivot-inner svg path { stroke-dashoffset: 0; transition: none; }
  .method--v3 .method-echo::before { transform: scaleY(1); transition: none; }
  .method--v3 .method-timeline::after { clip-path: none; }
}

/* ============ V8.21 · INTRO DU HERO (au chargement, pas au scroll) ============ */
/* Les elements du hero sont deja visibles a l'ouverture : ils ne peuvent donc
   pas etre declenches par le scroll. main.js leur retire .reveal, pose l'etat
   cache ci-dessous, puis ajoute .hero-in quand le voile du preloader se leve
   (ou tout de suite sur les pages sans preloader).

   Ici on anime avec des @keyframes et pas des transitions : une transition ne
   part que si le navigateur a peint l'etat de depart, ce qui n'est pas garanti
   quand le declencheur tombe dans la meme tache que la mise en place. Avec
   animation-fill-mode: both, l'etat de depart est tenu pendant le delai, quel
   que soit le moment ou la classe arrive.                                    */

/* Etat cache, avant le declenchement */
.hero-intro .hi-item { opacity: 0; }
.hero-intro .eyebrow.hi-item { letter-spacing: 0.42em; }

/* Entree */
.hero-intro.hero-in .hi-item {
  animation: heroItemIn 1s var(--ease-out) var(--hi-d, 0s) both;
}
@keyframes heroItemIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Les vignettes portent le decor : mouvement plus ample, et elles ouvrent */
.hero-intro.hero-in .hi-item--tiles {
  animation: heroTilesIn 1.2s var(--ease-out) var(--hi-d, 0s) both;
}
@keyframes heroTilesIn {
  from { opacity: 0; transform: translateY(34px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

/* L'eyebrow se resserre en arrivant */
.hero-intro.hero-in .eyebrow.hi-item {
  animation: heroEyebrowIn 1s var(--ease-out) var(--hi-d, 0s) both;
}
@keyframes heroEyebrowIn {
  from { opacity: 0; transform: translateY(24px); letter-spacing: 0.42em; }
  to   { opacity: 1; transform: none; letter-spacing: 0.14em; }
}

/* Le titre du hero joue mot a mot, meme principe */
.hero-intro.hero-in .rw > i {
  animation: heroWordIn 0.9s var(--ease-out) var(--rw-d, 0s) both;
}
@keyframes heroWordIn {
  from { opacity: 0; transform: translateY(108%); }
  to   { opacity: 1; transform: none; }
}

/* Le flou desktop ne s'applique pas au hero : il a sa propre entree */
@media (min-width: 901px) {
  .hero-intro h2,
  .hero-intro p,
  .hero-intro .eyebrow { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro .hi-item,
  .hero-intro.hero-in .hi-item,
  .hero-intro.hero-in .hi-item--tiles,
  .hero-intro.hero-in .eyebrow.hi-item,
  .hero-intro.hero-in .rw > i {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-intro .eyebrow.hi-item,
  .hero-intro.hero-in .eyebrow.hi-item { letter-spacing: 0.14em; }
}

/* ============ V8.24 · Ghost word repris sur notre methode, avant/apres, l'offre ============ */
.method,
.before-after,
.offer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.method-inner,
.before-after-inner,
.offer-inner {
  position: relative;
  z-index: 3;
}
.section-ghost {
  position: absolute;
  top: var(--sp-8);
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  padding: 0 var(--gut);
}
.section-ghost .works-ghost-text,
.works-head--v3 .works-ghost-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(4rem, 3rem + 8vw, 12rem);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 12%, transparent);
          text-stroke: 1.5px color-mix(in srgb, var(--text) 12%, transparent);
  white-space: nowrap;
  transform: translateX(var(--ghost-shift, 0));
  transition: transform 0.15s linear;
  will-change: transform;
  padding-right: 8vw;
  line-height: 1;
}
@media (max-width: 720px) {
  .section-ghost { top: var(--sp-6); }
  .section-ghost .works-ghost-text,
  .works-head--v3 .works-ghost-text { font-size: 3.5rem; }
}

/* ============ V8.25 · Ghost words alternent de cote pour un rythme visuel ============ */
.section-ghost.section-ghost--left,
.works-head-ghost.works-head-ghost--left {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 8vw;
}

/* ============ V8.26 · Hero : eyebrow + index editorial + anim blur-to-clear ============ */
.hero-v8-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-6);
}
.hero-v8-sub strong {
  color: var(--text);
  font-weight: 600;
}

/* Index editorial : trois lignes de service, style sommaire de magazine */
.hero-index {
  --row-h: 84px;
  max-width: 960px;
  margin: var(--sp-12) auto 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.hero-index-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.35fr) 40px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease;
}
.hero-index-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.hero-index-row > * { position: relative; z-index: 1; }
.hero-index-row:hover::before,
.hero-index-row:focus-visible::before { opacity: 1; }
.hero-index-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s ease, transform 0.5s var(--ease-out);
}
.hero-index-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: transform 0.5s var(--ease-out);
}
.hero-index-tag {
  font-family: var(--font-text);
  font-size: 0.98rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.hero-index-go {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text-dim);
  transition: color 0.35s ease, transform 0.5s var(--ease-out);
}
.hero-index-go svg { width: 22px; height: 22px; }
.hero-index-row:hover .hero-index-num,
.hero-index-row:focus-visible .hero-index-num { color: var(--accent); }
.hero-index-row:hover .hero-index-go,
.hero-index-row:focus-visible .hero-index-go {
  color: var(--accent);
  transform: translateX(8px);
}
.hero-index-row:hover .hero-index-name,
.hero-index-row:focus-visible .hero-index-name { transform: translateX(4px); }

/* Le titre du hero s'anime en flou -> net, sans decoupage en mots */
.hero-intro .hi-item--title {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(6px);
}
.hero-intro.hero-in .hi-item--title {
  animation: heroTitleBlurIn 1.1s var(--ease-out) var(--hi-d, 0.1s) both;
}
@keyframes heroTitleBlurIn {
  from { opacity: 0; filter: blur(16px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

@media (max-width: 780px) {
  .hero-index-row {
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-2);
  }
  .hero-index-tag { grid-column: 2 / 3; grid-row: 2; font-size: 0.9rem; margin-top: 2px; }
  .hero-index-go { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
  .hero-index-name { font-size: 1.25rem; }
  .hero-v8-eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro .hi-item--title,
  .hero-intro.hero-in .hi-item--title {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .hero-index-row,
  .hero-index-row::before,
  .hero-index-row:hover .hero-index-name,
  .hero-index-row:hover .hero-index-go { transition: none; transform: none; }
}

/* ============ V8.26 · ADVANTAGES · vignettes avec anim scroll + hover ============ */
.advantages {
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.advantages--soft { background: var(--bg-elev, #F1EFE7); }
.advantages-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  text-align: center;
  position: relative;
  z-index: 2;
}
.advantages-inner--flush { padding: 0; text-align: center; }
.advantages-inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: var(--sp-3) auto var(--sp-4);
  max-width: 780px;
  text-wrap: balance;
}
.advantages-lead {
  max-width: 620px;
  margin: 0 auto var(--sp-10);
  font-size: 1.02rem;
  color: var(--text-dim);
  line-height: 1.55;
  text-wrap: pretty;
}
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  text-align: left;
}
.adv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; }
.adv-card {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  background: color-mix(in srgb, var(--bg) 60%, var(--bg-elev, #F1EFE7));
  border: 1px solid var(--line);
  border-radius: var(--br-lg, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
  transition:
    transform 0.55s var(--ease-out),
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}
.advantages--soft .adv-card {
  background: color-mix(in srgb, var(--bg) 55%, var(--bg-elev));
}
.adv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
.adv-card > * { position: relative; z-index: 1; }
.adv-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 30px 60px -40px rgba(20, 20, 20, 0.35);
}
.adv-card:hover::before { opacity: 1; }
.adv-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.adv-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  transition: transform 0.6s var(--ease-out), background 0.4s ease;
}
.adv-icon svg { width: 24px; height: 24px; }
.adv-card:hover .adv-icon {
  transform: rotate(-8deg) scale(1.06);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.adv-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0;
}
.adv-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

@media (max-width: 1080px) {
  .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 620px) {
  .adv-grid,
  .adv-grid--3 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .adv-card { padding: var(--sp-5); }
  .advantages { padding: clamp(48px, 12vw, 80px) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-card,
  .adv-card:hover,
  .adv-icon,
  .adv-card:hover .adv-icon {
    transition: none;
    transform: none;
  }
  .adv-card::before,
  .adv-card:hover::before { opacity: 0; }
}

/* ============ V8.26 · Perf scroll · reduire le layout des sections lourdes ============ */
.method,
.before-after,
.offer,
.advantages,
.works {
  contain: layout paint;
}

/* ============ V8.27 · Offer plus · carte complementaire SEO ============ */
.offer-plus {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  max-width: 1100px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-5) var(--sp-6);
  background: color-mix(in srgb, var(--bg) 65%, var(--bg-elev, #F1EFE7));
  border: 1px solid var(--line);
  border-radius: var(--br-lg, 20px);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, box-shadow 0.5s ease;
}
.offer-plus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.offer-plus:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 30px 60px -40px rgba(20, 20, 20, 0.35);
}
.offer-plus:hover::before { opacity: 1; }
.offer-plus > * { position: relative; z-index: 1; }
.offer-plus-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  transition: transform 0.5s var(--ease-out);
}
.offer-plus-icon svg { width: 30px; height: 30px; }
.offer-plus:hover .offer-plus-icon { transform: rotate(-6deg) scale(1.05); }
.offer-plus-body { display: flex; flex-direction: column; gap: 6px; }
.offer-plus-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.offer-plus-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}
.offer-plus-body p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 620px;
}
.offer-plus-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  white-space: nowrap;
  transition: transform 0.4s var(--ease-out);
}
.offer-plus-cta svg { width: 18px; height: 18px; }
.offer-plus:hover .offer-plus-cta { transform: translateX(6px); }

@media (max-width: 780px) {
  .offer-plus {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .offer-plus-icon { width: 48px; height: 48px; border-radius: 12px; }
  .offer-plus-icon svg { width: 24px; height: 24px; }
  .offer-plus-cta { grid-column: 1 / -1; justify-content: flex-end; padding-top: var(--sp-2); }
  .offer-plus-body h3 { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .offer-plus,
  .offer-plus:hover,
  .offer-plus-icon,
  .offer-plus:hover .offer-plus-icon,
  .offer-plus-cta,
  .offer-plus:hover .offer-plus-cta {
    transition: none;
    transform: none;
  }
  .offer-plus::before,
  .offer-plus:hover::before { opacity: 0; }
}

/* ============ V8.29 · adv-grid 5 vignettes ============ */
.adv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .adv-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .adv-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .adv-grid--5 { grid-template-columns: 1fr; }
}

/* ============================================================
   V8.37 · Méthode v4 (tabs · ruler v2 · pivot v2 · step follow)
   ============================================================ */

/* Works CTA v2 : deux CTAs cote a cote */
.works-cta--v2 { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .works-cta--v2 { flex-direction: column; align-items: stretch; padding: 0 20px; }
  .works-cta--v2 .btn { width: 100%; justify-content: center; }
}

/* Tabs */
.method-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  margin: 26px auto 34px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 100%;
  flex-wrap: nowrap;
}
.method--v4 .method-inner { text-align: center; }
.method--v4 .method-inner > .eyebrow,
.method--v4 .method-inner > h2,
.method--v4 .method-inner > .method-lead { text-align: center; }
.method-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}
.method-tab:hover { color: var(--text); }
.method-tab.is-active {
  background: var(--text);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.28);
}
.method-tab .mtab-icon svg { width: 17px; height: 17px; display: block; }
@media (max-width: 720px) {
  .method-tabs { display: flex; width: 100%; flex-direction: column; border-radius: 20px; padding: 8px; gap: 4px; }
  .method-tab { justify-content: flex-start; padding: 14px 18px; border-radius: 14px; font-size: 0.95rem; }
}

/* Ruler v2 : plus lisible, avec badges numeros */
.method-ruler-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 920px;
  margin: 0 auto 44px;
  text-align: left;
}
.mrv-seg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
.mrv-seg--free { background: #F5F1EA; border-color: rgba(0, 0, 0, 0.08); }
.mrv-seg--paid { background: rgba(47, 107, 216, 0.06); border-color: rgba(47, 107, 216, 0.28); }
.mrv-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  width: fit-content;
}
.mrv-seg--paid .mrv-badge { background: rgba(47, 107, 216, 0.12); color: var(--accent); }
.mrv-amount { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.mrv-amount strong { font-weight: 800; }
.mrv-seg--paid .mrv-amount { color: var(--accent); }
.mrv-label { font-size: 0.86rem; color: rgba(0, 0, 0, 0.65); }
.mrv-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: rgba(0, 0, 0, 0.35);
}
.mrv-arrow svg { width: 24px; height: 24px; display: block; }

@media (max-width: 720px) {
  .method-ruler-v2 { grid-template-columns: 1fr; gap: 10px; }
  .mrv-arrow { padding: 4px 0; transform: rotate(90deg); }
}

/* Pivot v2 : plus emphatique, badge dessus */
.mt-pivot--v2 { position: relative; margin: 26px 0; }
.mt-pivot--v2 .mt-pivot-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.mt-pivot--v2 .mt-pivot-inner {
  background: linear-gradient(135deg, rgba(47, 107, 216, 0.08), rgba(47, 107, 216, 0.03));
  border: 1.5px solid var(--accent);
  border-radius: 22px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text);
}
.mt-pivot--v2 .mt-pivot-inner svg { flex-shrink: 0; color: var(--accent); width: 30px; height: 30px; }
.mt-pivot--v2 .mt-pivot-inner span { text-align: left; font-size: 0.98rem; line-height: 1.55; }

/* Step follow (etape 05 suivi) */
.mt-cost--follow {
  background: rgba(255, 168, 46, 0.15);
  color: #8a5100;
  border: 1px solid rgba(255, 168, 46, 0.35);
}
.mt-step--follow .mt-marker {
  background: linear-gradient(135deg, #FFA82E, #FF8C1A);
  color: #fff;
}
.mt-step--follow .mt-marker::after { background: rgba(255, 168, 46, 0.5); }

/* Timelines : tabs swap */
.method-timeline.mt--v4 { display: none; }
.method-timeline.mt--v4.is-active { display: block; }
.method-timeline.mt--v4[hidden] { display: none !important; }

/* Style timeline : centre le contenu (par heritage v3 c'est deja OK) */

/* ============================================================
   V8.37 · Offer v4 (3 formules cote a cote, identiques)
   ============================================================ */
.offer--v4 { padding: 100px 0 120px; }
.offer--v4 .offer-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; text-align: center; }
.offer--v4 .offer-lead { max-width: 720px; margin: 12px auto 0; color: rgba(0,0,0,0.7); }

.offer-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 54px;
  align-items: stretch;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 26px 30px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 24px;
  text-align: left;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.22);
}
.offer-card--featured {
  background: linear-gradient(180deg, #fff 0%, #F5F1EA 100%);
  border-color: rgba(47, 107, 216, 0.35);
  box-shadow: 0 24px 60px -30px rgba(47, 107, 216, 0.4);
  transform: translateY(-8px);
  padding-top: 44px;
}
.offer-card--featured:hover { transform: translateY(-12px); }
.offer-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.offer-card-head { display: flex; flex-direction: column; gap: 10px; }
.offer-card-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.offer-card h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.offer-card-hook {
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
  font-weight: 500;
  margin: 0;
}

.offer-card-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.offer-card-value {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
  font-weight: 500;
}
.offer-card--featured .offer-card-value { color: var(--accent); }
.offer-card-sub {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.6);
}

.offer-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.offer-card-badges span {
  font-size: 0.72rem;
  padding: 6px 11px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.offer-card-badges span strong { font-weight: 700; }

.offer-card-bonus {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: rgba(47, 107, 216, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.offer-card-bonus .star-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.offer-card-bonus strong { font-size: 0.94rem; font-weight: 700; color: var(--text); }
.offer-card-bonus .star-desc { font-size: 0.82rem; color: rgba(0, 0, 0, 0.7); line-height: 1.5; }

.offer-card h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  margin: 6px 0 -2px;
}

.offer-card-list, .offer-card-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-card-list li, .offer-card-options li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.82);
}
.offer-card-list .check {
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.5;
}
.offer-card-options .option-pill {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.5;
}

.offer-card .btn-full { margin-top: auto; }

@media (max-width: 1080px) {
  .offer-trio { grid-template-columns: 1fr; gap: 24px; }
  .offer-card--featured { transform: translateY(0); }
  .offer-card--featured:hover { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  .offer--v4 { padding: 70px 0 80px; }
  .offer--v4 .offer-inner { padding: 0 20px; }
  .offer-card { padding: 30px 22px 26px; }
  .offer-card h3 { font-size: 1.7rem; }
  .offer-card-value { font-size: 1.7rem; }
}

/* ============================================================
   V8.37 · Before site : encore plus moche, moins colore
   Override du look "girly 2015" vers un look SME beige/institutionnel
   ============================================================ */
.old-site {
  background: #F2EFE6 !important;
  color: #4a4438 !important;
  font-family: "Times New Roman", Georgia, serif !important;
}
.old-header {
  background: #ECE6D3 !important;
  border-bottom: 4px double #7d0000 !important;
}
.old-header-top {
  background: #7d0000 !important;
  color: #F5E9C7 !important;
  border-bottom: 1px solid #500 !important;
}
.old-header-main {
  padding: 10px 20px !important;
  background: #ECE6D3 !important;
  border-bottom: 2px ridge #B8AA82 !important;
}
.old-logo {
  font-family: "Times New Roman", serif !important;
  color: #7d0000 !important;
  font-size: 22px !important;
  font-weight: bold !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
.old-nav {
  font-family: "Times New Roman", serif !important;
  color: #4a4438 !important;
}
.old-nav a {
  color: #0000EE !important;
  text-decoration: underline !important;
}
.old-banner {
  padding: 20px !important;
  background: repeating-linear-gradient(45deg, #D9CFA8 0px, #D9CFA8 10px, #C9BE9C 10px, #C9BE9C 20px) !important;
  border-top: 1px solid #7d0000 !important;
  color: #3a2f20 !important;
}
.old-slider-dots {
  color: #7d0000 !important;
  font-family: Georgia, serif !important;
}
.old-banner-title {
  font-family: "Times New Roman", serif !important;
  color: #7d0000 !important;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.7) !important;
  letter-spacing: 1px;
}
.old-banner-sub {
  font-family: "Times New Roman", serif !important;
  font-style: italic !important;
  color: #3a2f20 !important;
}
.old-content {
  background: #F2EFE6 !important;
}
.old-h2 {
  font-family: "Times New Roman", serif !important;
  color: #7d0000 !important;
  border-bottom: 2px dotted #7d0000 !important;
}
.old-p {
  color: #3a2f20 !important;
  font-family: "Times New Roman", serif !important;
}
.old-list {
  font-family: "Times New Roman", serif !important;
  color: #3a2f20 !important;
}

/* ============================================================
   V8.37b · Signature v4 (deroule progressif au scroll)
   Colonne gauche sticky + cartes qui defilent une par une a droite
   ============================================================ */
.signature--v4 {
  padding: 110px 0 140px;
  background: #F5F1EA;
}
.signature-inner-v4 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}

/* GAUCHE : sticky pendant tout le scroll de la section */
.signature-left-v4 {
  position: relative;
}
.signature-sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.signature-sticky .eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.signature-sticky h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.signature-sticky .signature-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
}
.signature-sticky .u-accent {
  position: relative;
  display: inline-block;
}
.signature-sticky .u-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left center;
  animation: sig-underline 1.2s 0.6s ease-out both;
  transform: scaleX(0);
}
@keyframes sig-underline {
  to { transform: scaleX(1); }
}
.signature-sticky .signature-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 12px 20px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  width: fit-content;
  transition: background 0.24s ease, color 0.24s ease;
}
.signature-sticky .signature-more:hover {
  background: var(--accent);
  color: #fff;
}

/* DROITE : cartes empilees avec grand espacement pour reveal individuel */
.signature-right-v4 {
  display: flex;
  flex-direction: column;
  gap: 34vh;
  padding-bottom: 30vh;
}
.sig-card {
  position: relative;
  padding: 34px 32px 30px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.18);
}
.sig-card-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sig-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.sig-card h3 strong { font-weight: 500; color: var(--accent); }
.sig-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
  margin: 0;
}
.sig-card--intro {
  background: linear-gradient(180deg, #fff 0%, rgba(47, 107, 216, 0.05) 100%);
  border-color: rgba(47, 107, 216, 0.2);
}
.sig-card--stat {
  background: linear-gradient(160deg, var(--text) 0%, #2c2c2c 100%);
  border-color: transparent;
  color: #fff;
}
.sig-card--stat .sig-card-num { color: rgba(255, 255, 255, 0.65); }
.sig-card--stat h3 { color: #fff; }
.sig-card--stat h3 strong { color: #FFC96B; font-weight: 500; }
.sig-card--stat p { color: rgba(255, 255, 255, 0.78); }
.sig-big-stat {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: #FFC96B;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -0.05em;
  font-weight: 500;
}
.sig-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #FFC96B;
  text-decoration: none;
  font-size: 0.95rem;
  margin-top: 8px;
}
.sig-card-cta:hover { color: #fff; }

/* Responsive : sticky abandonne, tout se lit en pile normale */
@media (max-width: 960px) {
  .signature-inner-v4 {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .signature-sticky {
    position: static;
    gap: 16px;
  }
  .signature-right-v4 {
    gap: 22px;
    padding-bottom: 0;
  }
  .sig-card { padding: 28px 24px 26px; }
  .sig-card h3 { font-size: 1.4rem; }
  .sig-big-stat { font-size: 2.8rem; }
}

/* ============================================================
   V8.39 · Method v4 : centrer tout le contenu (titre + sous-titres + steps)
   ============================================================ */
.method--v4 .method-lead,
.method--v4 .method-inner .eyebrow,
.method--v4 .method-inner h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.method--v4 .method-lead {
  max-width: 720px;
}

/* Timeline : centrer titre ET sous-titre de chaque etape */
.method--v4 .mt-body,
.method--v4 .mt-body h3,
.method--v4 .mt-body p,
.method--v4 .mt-head {
  text-align: center;
}
.method--v4 .mt-head {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.method--v4 .mt-body p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Pivot : contenu centre aussi */
.method--v4 .mt-pivot-inner {
  justify-content: center;
  text-align: center;
}
.method--v4 .mt-pivot-inner span {
  text-align: center !important;
}

/* ============================================================
   V8.40 · Before site : ROSE basique tres ancien (override v8.37)
   Times New Roman, pas de degradés, pas d'effets, thème rose simple
   ============================================================ */
.old-site {
  background: #FFFFFF !important;
  color: #000000 !important;
  font-family: "Times New Roman", Times, serif !important;
}
.old-header {
  background: #FFFFFF !important;
  border-bottom: 2px solid #CC3399 !important;
}
.old-header-top {
  background: #FFCCE5 !important;
  color: #000 !important;
  padding: 4px 20px !important;
  border-bottom: 1px solid #CC3399 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-weight: normal !important;
}
.old-header-main {
  background: #FFFFFF !important;
  padding: 10px 20px !important;
  border-bottom: none !important;
}
.old-logo {
  font-family: "Times New Roman", Times, serif !important;
  color: #CC3399 !important;
  font-size: 22px !important;
  font-weight: bold !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none;
}
.old-nav {
  font-family: "Times New Roman", Times, serif !important;
  color: #000 !important;
  font-size: 12px !important;
}
.old-nav a {
  color: #0000EE !important;
  text-decoration: underline !important;
  font-weight: normal !important;
}
.old-banner {
  padding: 16px 20px !important;
  background: #FFCCE5 !important;
  border-top: none !important;
  color: #000 !important;
  text-align: center !important;
}
.old-slider-dots {
  color: #000 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 12px !important;
}
.old-banner-title {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 20px !important;
  color: #CC3399 !important;
  font-weight: bold !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}
.old-banner-sub {
  font-family: "Times New Roman", Times, serif !important;
  font-size: 13px !important;
  color: #000 !important;
  font-style: normal !important;
  font-weight: normal !important;
}
.old-content {
  background: #FFFFFF !important;
}
.old-h2 {
  font-family: "Times New Roman", Times, serif !important;
  color: #CC3399 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-bottom: 1px solid #CC3399 !important;
  padding-bottom: 2px !important;
  margin: 12px 0 6px !important;
}
.old-p {
  font-family: "Times New Roman", Times, serif !important;
  color: #000 !important;
  font-size: 12px !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  font-style: normal !important;
}
.old-list {
  font-family: "Times New Roman", Times, serif !important;
  color: #000 !important;
  font-size: 12px !important;
  list-style: disc !important;
  padding-left: 20px !important;
  margin: 4px 0 !important;
}
.old-list li {
  margin: 2px 0 !important;
  font-family: "Times New Roman", Times, serif !important;
}

/* ============================================================
   V8.41 · Signature v4 : compacter, moins d'espace, harmoniser
   ============================================================ */
.signature--v4 {
  padding: 90px 0 100px;
}
.signature-inner-v4 {
  gap: 60px;
}
.signature-right-v4 {
  gap: 18px !important;
  padding-bottom: 0 !important;
}
.sig-card {
  padding: 26px 28px 24px;
  gap: 10px;
  border-radius: 20px;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.15);
}
.sig-card h3 {
  font-size: 1.4rem;
  line-height: 1.2;
}
.sig-card p {
  font-size: 0.95rem;
  line-height: 1.55;
}
.sig-card-num {
  font-size: 0.66rem;
}
.sig-card--stat {
  padding: 30px 28px 28px;
}
.sig-big-stat {
  font-size: 2.6rem;
}
@media (max-width: 960px) {
  .signature--v4 { padding: 70px 0 80px; }
  .signature-inner-v4 { gap: 32px; }
  .signature-right-v4 { gap: 14px !important; }
  .sig-card { padding: 22px 22px 20px; }
  .sig-card h3 { font-size: 1.25rem; }
}

/* ============================================================
   V8.44 · Offer cards : intertitres qui ressortent + polices site
   ============================================================ */

/* Intertitres Inclus / En option : bien detaches, en accent */
.offer-card-h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin: 10px 0 -2px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(47, 107, 216, 0.18);
}
.offer-card-h4::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.offer-card-h4 span {
  display: inline-block;
}
.offer-card-h4--alt {
  color: rgba(0, 0, 0, 0.55) !important;
  border-top-color: rgba(0, 0, 0, 0.1);
}
.offer-card-h4--alt::before {
  background: rgba(0, 0, 0, 0.35);
}

/* Cartes offer : ecart resserre entre blocs */
.offer-card { gap: 14px !important; }
.offer-card-head { gap: 6px !important; }
.offer-card-hook {
  font-family: var(--font-text);
  font-size: 0.92rem !important;
  color: rgba(0,0,0,0.72) !important;
  font-weight: 500;
}
.offer-card-price {
  padding: 12px 0 10px !important;
}
.offer-card-list li, .offer-card-options li {
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}
.offer-card-list, .offer-card-options {
  gap: 6px !important;
}

/* Ajuster h3 en Space Grotesk pour matcher le reste du site */
.offer-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.015em;
}
.offer-card-value {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.7rem !important;
  letter-spacing: -0.02em;
}

/* Ancien offer-card-bonus : plus utilise, on le masque au cas ou */
.offer-card-bonus { display: none !important; }

/* Sig-cards : uniformiser police */
.sig-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.sig-big-stat {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ============================================================
   V8.46 · Responsive PHONE global : compacter, plus horizontal
   Vise < 720px et surtout < 520px
   ============================================================ */

@media (max-width: 720px) {

  /* -------- Notre methode : tabs HORIZONTAUX et petits -------- */
  .method-tabs {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    max-width: 100%;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 2px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .method-tabs::-webkit-scrollbar { display: none; }
  .method-tab {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 9px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    gap: 5px !important;
  }
  .method-tab .mtab-icon { display: none; }

  /* -------- Notre methode : etapes plus compactes -------- */
  .method--v4 .method-inner { padding: 0 18px; }
  .method--v4 .method-timeline { padding-left: 42px !important; }
  .method--v4 .method-timeline::before { left: 20px !important; }
  .method--v4 .method-timeline::after { left: 20px !important; }
  .method--v4 .mt-step {
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    padding-bottom: 22px !important;
  }
  .method--v4 .mt-marker {
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 0 0 4px var(--bg);
  }
  .method--v4 .mt-num {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }
  .method--v4 .mt-head {
    gap: 6px !important;
    margin-bottom: 4px !important;
    justify-content: flex-start !important;
  }
  .method--v4 .mt-head .mt-when,
  .method--v4 .mt-head .mt-cost {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
  }
  .method--v4 .mt-body {
    text-align: left !important;
    max-width: none !important;
    padding-top: 0 !important;
  }
  .method--v4 .mt-body h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
    margin: 0 0 4px !important;
  }
  .method--v4 .mt-body p {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .method--v4 .mt-pivot {
    padding-bottom: 22px !important;
    padding-left: 0 !important;
    margin-left: -42px;
    padding-right: 0;
  }
  .method--v4 .mt-pivot .mt-pivot-inner {
    padding: 14px 16px !important;
    gap: 10px !important;
    margin-left: 18px;
    margin-right: 0;
    text-align: left !important;
    max-width: none;
  }
  .method--v4 .mt-pivot-inner svg {
    width: 22px !important;
    height: 22px !important;
  }
  .method--v4 .mt-pivot-inner span {
    text-align: left !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  .method--v4 .mt-pivot--v2 .mt-pivot-badge {
    font-size: 0.62rem !important;
    padding: 3px 10px !important;
    top: -8px;
  }

  /* Ruler v2 mobile : compact horizontal si assez de place, sinon empile */
  .method-ruler-v2 { gap: 8px !important; margin-bottom: 26px !important; }
  .mrv-seg {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    gap: 4px !important;
  }
  .mrv-badge { font-size: 0.62rem !important; padding: 3px 8px !important; }
  .mrv-amount { font-size: 0.92rem !important; }
  .mrv-label { font-size: 0.76rem !important; }
  .mrv-arrow { padding: 2px 0 !important; }

  /* Titre section + lead */
  .method--v4 .method-inner h2 { font-size: 1.7rem !important; line-height: 1.15; }
  .method--v4 .method-lead { font-size: 0.92rem !important; }

  /* -------- Formules : CAROUSEL horizontal avec peek gauche/droite -------- */
  .offer--v4 .offer-inner { padding: 0 !important; }
  .offer--v4 > .offer-inner > .eyebrow,
  .offer--v4 > .offer-inner > h2,
  .offer--v4 > .offer-inner > .offer-lead { padding: 0 20px; }
  .offer--v4 .offer-inner h2 { font-size: 1.7rem !important; }

  .offer-trio {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 12%;
    padding: 20px 12% 30px !important;
    gap: 14px !important;
    margin-top: 30px !important;
    scrollbar-width: none;
  }
  .offer-trio::-webkit-scrollbar { display: none; }
  .offer-card {
    flex: 0 0 76% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 24px 20px 22px !important;
    border-radius: 20px !important;
    gap: 12px !important;
    transform: none !important;
  }
  .offer-card--featured {
    transform: none !important;
    padding-top: 32px !important;
  }
  .offer-card--featured:hover { transform: none !important; }
  .offer-card:hover { transform: none !important; }
  .offer-card h3 { font-size: 1.2rem !important; }
  .offer-card-value { font-size: 1.5rem !important; }
  .offer-card-hook { font-size: 0.85rem !important; }
  .offer-card-list li, .offer-card-options li {
    font-size: 0.82rem !important;
  }
  .offer-card-badges span { font-size: 0.66rem !important; padding: 4px 8px !important; }
  .offer-card-badge {
    font-size: 0.62rem !important;
    padding: 4px 10px !important;
    top: -10px;
  }
  .offer-card-h4 { font-size: 0.64rem !important; padding-top: 10px; }

  /* -------- FAQ : padding contenu, texte pas colle -------- */
  .faq { padding: 60px 0 60px; }
  .faq-inner { padding: 0 20px; }
  .faq-list { gap: 10px; }
  .faq-item summary {
    padding: 16px 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.35;
    gap: 12px;
  }
  .faq-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .faq-icon svg { width: 13px !important; height: 13px !important; }
  .faq-answer {
    padding: 0 18px 18px !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
  .faq h2 { font-size: 1.7rem !important; }

  /* -------- Portfolio : CTA plus compact -------- */
  .works-cta--v2 { padding: 0 20px !important; gap: 10px !important; }
  .works-cta--v2 .btn { padding: 12px 18px !important; font-size: 0.9rem !important; }

  /* -------- Signature v3 : mobile plus tight -------- */
  .signature--v3 .signature-inner {
    padding: 0 20px;
  }
  .signature--v3 h2 { font-size: 1.7rem !important; line-height: 1.15; }
  .signature--v3 .signature-lead { font-size: 0.95rem !important; }
  .signature-checks li { font-size: 0.88rem !important; }
}

/* Petits ecrans specifiques (<= 520px) */
@media (max-width: 520px) {
  .method-tab span:not(.mtab-icon) { font-size: 0.7rem !important; }
  .offer-card { flex-basis: 82% !important; }
  .offer-trio { padding-left: 9% !important; padding-right: 9% !important; scroll-padding: 0 9%; }
}

/* ============================================================
   V8.47 · Ajustements desktop + gros pack mobile
   ============================================================ */

/* ----- DESKTOP + MOBILE : offer card h3 plus gros que le prix ----- */
.offer-card h3 {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}
.offer-card-value {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}
.offer-card--featured .offer-card-value { color: var(--accent) !important; }

/* ----- Clickable work-card via stretched-link pattern ----- */
.work-card { position: relative; }
.work-card .work-domain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.work-card > *:not(.work-domain) {
  position: relative;
  z-index: 2;
}
.work-card { cursor: pointer; }

/* ----- MOBILE ONLY ----- */
@media (max-width: 720px) {

  /* 1. Ghost text "realisations" reactive sur mobile */
  .works-head--v3 .works-head-ghost,
  .works-head--v3 #works-ghost,
  #works-ghost {
    display: block !important;
    position: absolute;
    right: -30px;
    top: 40%;
    font-size: 3.2rem !important;
    color: rgba(0, 0, 0, 0.05);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    transform: translateY(-50%);
  }
  .works-head--v3 {
    position: relative;
    overflow: hidden;
    padding-right: 20px;
  }
  .works-head--v3 .works-head-title { position: relative; z-index: 1; }

  /* 2. CTAs Portfolio cote a cote */
  .works-cta--v2 {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }
  .works-cta--v2 .btn {
    width: auto !important;
    flex: 1 1 0;
    padding: 12px 14px !important;
    font-size: 0.78rem !important;
    gap: 6px;
    white-space: nowrap;
  }
  .works-cta--v2 .btn .arrow { width: 14px !important; height: 14px !important; }

  /* 3. Signature v3 : reorder titre / vignette / lead / checks */
  .signature--v3 .signature-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .signature--v3 .signature-left {
    display: contents !important;
  }
  .signature--v3 .signature-left .eyebrow { order: 1; }
  .signature--v3 .signature-left h2 { order: 2; font-size: 2.4rem !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; margin: 0 !important; }
  .signature--v3 .signature-right { order: 3; }
  .signature--v3 .signature-lead { order: 4; margin: 0 !important; font-size: 0.98rem !important; line-height: 1.5 !important; }
  .signature--v3 .signature-checks { order: 5; margin: 0 !important; }
  .signature--v3 .signature-more { order: 6; margin-top: 8px !important; }

  /* Chaque check sur une ligne */
  .signature-checks li {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 22px !important;
  }
  .signature-checks {
    display: flex;
    flex-direction: column;
    gap: 6px !important;
  }

  /* Vignette 88% adaptee */
  .signature--v3 .validation-box {
    padding: 20px 22px !important;
  }
  .signature--v3 .validation-box h3 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
  .signature--v3 .validation-box p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* 4. Titres de section a 2.4rem partout comme "Le travail d'abord" */
  .method--v4 .method-inner h2,
  .offer--v4 .offer-inner h2 {
    font-size: 2.4rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
  }

  /* 5. Ruler v2 : deux blocs cote a cote sur mobile */
  .method-ruler-v2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .method-ruler-v2 .mrv-arrow { display: none !important; }
  .mrv-seg { padding: 12px 12px !important; }
  .mrv-badge { font-size: 0.56rem !important; padding: 2px 6px !important; }
  .mrv-amount { font-size: 0.82rem !important; line-height: 1.2 !important; }
  .mrv-label { font-size: 0.7rem !important; line-height: 1.3 !important; }

  /* 6. Frise verticale : plus a l'extremite gauche */
  .method--v4 .method-timeline {
    padding-left: 32px !important;
  }
  .method--v4 .method-timeline::before { left: 10px !important; }
  .method--v4 .method-timeline::after { left: 10px !important; }
  .method--v4 .mt-step {
    grid-template-columns: 32px 1fr !important;
    gap: 10px !important;
  }
  .method--v4 .mt-marker {
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 0 0 3px var(--bg);
  }
  .method--v4 .mt-num { font-size: 0.65rem !important; }

  /* 7. Texte des etapes CENTRE */
  .method--v4 .mt-body {
    text-align: center !important;
  }
  .method--v4 .mt-body h3, .method--v4 .mt-body p {
    text-align: center !important;
  }
  .method--v4 .mt-head {
    justify-content: center !important;
  }

  /* 8. Pivot : recadre sur toute la largeur, ne surpasse pas la ligne */
  .method--v4 .mt-pivot {
    padding-left: 0 !important;
    margin-left: -32px !important;
    padding-right: 0 !important;
    padding-bottom: 22px !important;
  }
  .method--v4 .mt-pivot .mt-pivot-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    padding: 14px 16px !important;
    flex-direction: column;
    gap: 8px !important;
  }
  .method--v4 .mt-pivot-inner span { text-align: center !important; }

  /* 9. Offer trio : scroll-snap avec Sites au centre par defaut */
  .offer-trio {
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 12% !important;
    padding-left: 12% !important;
    padding-right: 12% !important;
  }
  .offer-card {
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    flex: 0 0 76% !important;
  }

  /* Subtitle offer un peu plus discret */
  .offer--v4 .offer-lead {
    font-size: 0.88rem !important;
    line-height: 1.5;
  }

  /* 10. Legend obligatoire : force une ligne */
  .cf-legend {
    white-space: nowrap;
    font-size: 0.72rem !important;
    text-align: center !important;
    padding: 8px 6px !important;
  }

  /* 11. Contact final subtitle -> pills */
  .contact-final--v2 .contact-final-lead { display: none !important; }
  .contact-final-pills {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 8px;
  }
  .contact-final-pills span {
    font-size: 0.7rem;
    padding: 6px 10px;
    background: rgba(47, 107, 216, 0.08);
    color: var(--accent);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
  }
}

/* Defaut desktop : les pills mobiles sont masquees */
.contact-final-pills { display: none; }

/* ============================================================
   V8.48 · Hero mobile : reactiver le float des tuiles + aerer
   ============================================================ */
@media (max-width: 900px) {
  /* Re-autoriser l'animation heroTileFloat en override du bloc precedent */
  .hero-tile {
    animation: heroTileFloat 4.8s ease-in-out infinite !important;
    animation-delay: var(--float-delay, 0s) !important;
    /* Retirer le transform !important pour que l'animation prenne le controle */
    transform: none;
  }
  /* Reduction du deplacement pour rester proportionnel a la taille mobile */
  @keyframes heroTileFloat {
    0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--tilt, 0deg)) translateY(-10px); }
  }

  /* Aerer le hero : plus de padding vertical, plus de gap avant les tuiles */
  .hero-v8 {
    padding: calc(var(--sp-6) + 60px) 24px calc(var(--sp-8) + 16px) !important;
  }
  .hero-v8-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hero-v8-title { margin-bottom: 18px !important; }
  .hero-v8-sub { margin-bottom: 20px !important; }
  .hero-v8-ctas { margin-bottom: 32px !important; }
  .hero-tiles { margin-bottom: calc(var(--sp-8) + 20px) !important; gap: 8px !important; }
}

/* ============================================================
   V8.49 · Project pages : preview cliquable + prospune cover
   ============================================================ */

/* Wrap anchor du preview */
.project-window-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border-radius: 18px;
}
.project-window-link:hover {
  transform: translateY(-4px);
}
.project-window-link:hover .project-window {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
}

/* Cover placeholder Prospune */
.project-screenshot--placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1A1A1A 0%, #2F6BD8 100%);
  color: #fff;
}
.prospune-cover {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  max-width: 640px;
}
.prospune-cover-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.prospune-cover-brand .dot { color: var(--accent); }
.prospune-cover-tag {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.35;
}
.prospune-cover-cta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================================
   V8.50 · Responsive PHONE : petits ajustements
   ============================================================ */

/* Bloquer le scroll horizontal et le zoom pinch sur mobile */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    touch-action: pan-y !important;
  }
  body {
    -webkit-text-size-adjust: 100%;
  }
}

@media (max-width: 720px) {

  /* 1. Retirer le ghost "realisations" derriere "Le travail d'abord" */
  .works-head--v3 .works-head-ghost,
  .works-head--v3 #works-ghost,
  #works-ghost {
    display: none !important;
  }

  /* 2. Presence digitale : encadre noir 88% -> checks bien a gauche, une ligne, pas de debordement */
  .signature--v3 .signature-inner {
    max-width: 100vw !important;
    padding: 0 20px !important;
    overflow: hidden;
  }
  .signature-checks {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }
  .signature-checks li {
    padding-left: 22px !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }
  /* La puce (::before ou le check) sur le bord gauche */
  .signature-checks li::before {
    left: 0 !important;
    margin-left: 0 !important;
  }

  /* Vignette 88% adaptee a la largeur */
  .signature--v3 .validation-box {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .signature--v3 .signature-right {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ============================================================
   V8.51 · Method mobile : center + ligne collee gauche + pivot propre
   Signature checks : nouveaux textes courts sans ellipsis
   ============================================================ */
@media (max-width: 720px) {

  /* Presence digitale : checks courts, pas de coupure */
  .signature-checks li {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.9rem !important;
  }

  /* Method : ligne verticale collee tres a gauche */
  .method--v4 .method-timeline {
    padding-left: 44px !important;
  }
  .method--v4 .method-timeline::before {
    left: 20px !important;
  }
  .method--v4 .method-timeline::after {
    left: 20px !important;
  }

  /* Etapes : marker sur la ligne, body prend le reste, texte CENTRE */
  .method--v4 .mt-step {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-bottom: 26px !important;
  }
  .method--v4 .mt-marker {
    width: 40px !important;
    height: 40px !important;
    margin-left: -20px !important;
    flex: 0 0 40px !important;
    box-shadow: 0 0 0 4px var(--bg) !important;
  }
  .method--v4 .mt-num {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }
  .method--v4 .mt-body {
    flex: 1 1 auto !important;
    text-align: center !important;
    max-width: 100% !important;
    padding-top: 4px !important;
  }
  .method--v4 .mt-body h3,
  .method--v4 .mt-body p {
    text-align: center !important;
  }
  .method--v4 .mt-head {
    justify-content: center !important;
  }

  /* Pivot : couvre la ligne verticale avec un fond propre */
  .method--v4 .mt-pivot {
    padding-left: 0 !important;
    margin-left: -44px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 26px !important;
    position: relative;
    z-index: 5;
  }
  .method--v4 .mt-pivot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 26px;
    width: 44px;
    background: var(--bg);
    z-index: 1;
  }
  .method--v4 .mt-pivot .mt-pivot-inner {
    position: relative;
    z-index: 2;
    margin: 0 12px !important;
    padding: 16px 18px !important;
    text-align: center !important;
    flex-direction: column;
    gap: 8px !important;
  }
  .method--v4 .mt-pivot-inner svg {
    width: 24px !important;
    height: 24px !important;
  }
  .method--v4 .mt-pivot-inner span {
    text-align: center !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }
  .method--v4 .mt-pivot--v2 .mt-pivot-badge {
    top: -10px !important;
    left: calc(50% + 22px);
  }
}

/* ============================================================
   V8.55 · Notre methode DESKTOP : text centre + marker superpose ligne + pivot au-dessus ligne
   Applique >= 721px pour ne pas casser le pack mobile
   ============================================================ */
@media (min-width: 721px) {

  /* Etape : marker superpose sur la ligne, body prend toute la largeur, texte centre */
  .method--v4 .mt-step {
    position: relative !important;
    display: block !important;
    grid-template-columns: none !important;
    padding-left: 0 !important;
    padding-bottom: var(--sp-10);
  }
  .method--v4 .mt-marker {
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 3 !important;
    box-shadow: 0 0 0 4px var(--bg);
  }
  .method--v4 .mt-body {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  .method--v4 .mt-body h3,
  .method--v4 .mt-body p {
    text-align: center !important;
  }
  .method--v4 .mt-head {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Pivot : par-dessus la ligne bleue (elle passe derriere) */
  .method--v4 .mt-pivot,
  .method--v4 .mt-pivot--v2 {
    position: relative !important;
    z-index: 10 !important;
  }
  .method--v4 .mt-pivot-inner {
    position: relative;
    z-index: 11;
    background: linear-gradient(135deg, rgba(47, 107, 216, 0.1), rgba(47, 107, 216, 0.05)),
                var(--bg) !important;
  }
  .method--v4 .mt-pivot--v2 .mt-pivot-badge {
    z-index: 12 !important;
  }
  /* Petit halo bg autour de la ligne pour l'effacer visuellement derriere la vignette pivot */
  .method--v4 .mt-pivot::before {
    content: '';
    position: absolute;
    left: 0;
    top: -8px;
    bottom: -8px;
    width: 48px;
    background: var(--bg);
    z-index: 9;
  }
}

/* ============================================================
   V8.56 · Notre methode PHONE : marker superpose ligne + texte centre plein largeur
   ============================================================ */
@media (max-width: 720px) {

  /* Timeline : padding-left minimal, ligne collee au bord */
  .method--v4 .method-timeline {
    padding-left: 0 !important;
    position: relative;
  }
  .method--v4 .method-timeline::before {
    left: 16px !important;
  }
  .method--v4 .method-timeline::after {
    left: 16px !important;
  }

  /* Etape : block plein largeur, marker superpose ligne (absolute) */
  .method--v4 .mt-step {
    display: block !important;
    grid-template-columns: none !important;
    padding-left: 0 !important;
    padding-bottom: 26px !important;
    position: relative !important;
  }
  .method--v4 .mt-marker {
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    margin-left: 0 !important;
    width: 32px !important;
    height: 32px !important;
    flex: none !important;
    z-index: 3 !important;
    box-shadow: 0 0 0 3px var(--bg) !important;
  }
  .method--v4 .mt-num {
    font-size: 0.7rem !important;
  }

  /* Body : plein largeur, texte centre */
  .method--v4 .mt-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    flex: none !important;
  }
  .method--v4 .mt-body h3,
  .method--v4 .mt-body p {
    text-align: center !important;
  }
  .method--v4 .mt-head {
    justify-content: center !important;
  }

  /* Pivot : plein largeur, au-dessus de la ligne */
  .method--v4 .mt-pivot {
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 26px !important;
    position: relative;
    z-index: 10;
  }
  .method--v4 .mt-pivot::before {
    left: 0 !important;
    width: 40px !important;
    top: -8px !important;
    bottom: -8px !important;
    background: var(--bg) !important;
    z-index: 1;
  }
  .method--v4 .mt-pivot .mt-pivot-inner {
    margin-left: 12px !important;
    margin-right: 12px !important;
    z-index: 2;
  }
  .method--v4 .mt-pivot--v2 .mt-pivot-badge {
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
  }
}

/* ============================================================
   V8.57 · Notre methode : forcer padding gauche/droite pour que le texte
   ne passe JAMAIS sous la ligne / marker, tout en restant centre
   ============================================================ */
@media (max-width: 720px) {
  .method--v4 .mt-body {
    padding-left: 44px !important;
    padding-right: 44px !important;
    box-sizing: border-box;
  }
  .method--v4 .mt-body h3,
  .method--v4 .mt-body p,
  .method--v4 .mt-head {
    max-width: 100% !important;
  }
  /* Pivot inner : marges laterales pour ne pas coller au bord gauche non plus */
  .method--v4 .mt-pivot .mt-pivot-inner {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* Desktop : meme securite symmetrique */
@media (min-width: 721px) {
  .method--v4 .mt-body {
    padding-left: 64px !important;
    padding-right: 64px !important;
    box-sizing: border-box;
  }
}

/* ============================================================
   V8.60 · Advantages : uniformiser sur mobile (flush partout)
   Desktop : padding par defaut (cards moyennes comme sites-internet)
   Mobile : padding 0 (cards larges comme applications l'etait avant)
   ============================================================ */
@media (max-width: 720px) {
  .advantages-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .adv-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================================
   V8.62 · PHONE : advantages 4/3 vignettes -> carousel horizontal swipe
   Sur mobile, .adv-grid devient une piste scroll-snap comme .offer-trio.
   Concerne : Sites internet, Applications metier, SEO
   ============================================================ */
@media (max-width: 720px) {
  .adv-grid,
  .adv-grid--3 {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 12%;
    padding: 16px 12% 24px !important;
    gap: 14px !important;
    scrollbar-width: none;
    max-width: 100%;
  }
  .adv-grid::-webkit-scrollbar,
  .adv-grid--3::-webkit-scrollbar {
    display: none;
  }
  .adv-card {
    flex: 0 0 76% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 22px 20px !important;
    box-sizing: border-box;
  }
  .adv-card h3 {
    font-size: 1.05rem !important;
  }
  .adv-card p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  .adv-num {
    font-size: 0.72rem !important;
  }
  .adv-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .adv-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* Retirer le padding lateral 0 sur advantages-inner (v8.60) pour que le peek fonctionne */
  .advantages-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 520px) {
  .adv-card {
    flex-basis: 82% !important;
  }
  .adv-grid,
  .adv-grid--3 {
    scroll-padding-inline: 9% !important;
    padding-left: 9% !important;
    padding-right: 9% !important;
  }
}

/* ============================================================
   V8.63 · Fix carousel adv-grid : texte plus coupé, cards respirent
   Le probleme sur applications venait de :
   - overflow:hidden sur .adv-card qui rognait le texte
   - .service-detail-inner qui ajoutait du padding non desire
   - flex align stretch qui figeait toutes les hauteurs sans laisser respirer
   ============================================================ */
@media (max-width: 720px) {
  /* Neutraliser les paddings des containers parents pour laisser le carousel prendre la pleine largeur */
  .service-detail {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .service-detail-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .service-detail-inner > .advantages-inner,
  .service-detail > .advantages-inner {
    padding: 0 !important;
    max-width: 100% !important;
  }
  /* Le eyebrow / h2 / lead au-dessus du carousel gardent un padding */
  .service-detail-inner > .advantages-inner > .eyebrow,
  .service-detail-inner > .advantages-inner > h2,
  .service-detail-inner > .advantages-inner > .advantages-lead,
  .advantages-inner > .eyebrow,
  .advantages-inner > h2,
  .advantages-inner > .advantages-lead {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Le service-detail-block (Modevia, Prospune) reste avec du padding */
  .service-detail-inner > .service-detail-block {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Cards : sans overflow rognant, hauteur qui s'adapte au contenu */
  .adv-card {
    overflow: visible !important;
    align-items: stretch;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  /* Chaque titre / paragraphe peut wrap normalement */
  .adv-card h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word;
  }
  .adv-card p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word;
  }

  /* La piste : bien align:stretch pour cards de meme hauteur (la plus haute) */
  .adv-grid,
  .adv-grid--3 {
    align-items: stretch !important;
  }
}

/* ============================================================
   V8.64 · Portfolio hero v2 : hero dedie mieux mis en valeur
   Applique aux 4 pages : portfolio, sites-internet, applications, seo
   ============================================================ */
.portfolio-hero--v2 {
  padding: 180px 24px 100px !important;
}
.portfolio-hero--v2 .portfolio-hero-inner {
  max-width: 940px;
}
.portfolio-hero--v2 .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px !important;
  padding: 6px 14px;
  background: rgba(47, 107, 216, 0.08);
  border-radius: 999px;
}
.portfolio-hero--v2 h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  margin: 0 auto 26px !important;
  max-width: 900px;
  color: var(--text);
}
.portfolio-hero--v2 h1 .accent {
  color: var(--accent);
}
.portfolio-hero--v2 p {
  color: rgba(0, 0, 0, 0.65);
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}

/* Mobile hero v2 : ajusté */
@media (max-width: 720px) {
  .portfolio-hero--v2 {
    padding: 100px 20px 60px !important;
  }
  .portfolio-hero--v2 h1 {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
  }
  .portfolio-hero--v2 p {
    font-size: 0.98rem !important;
  }
  .portfolio-hero--v2 .eyebrow {
    font-size: 0.65rem !important;
    padding: 5px 12px !important;
    margin-bottom: 18px !important;
  }
}

/* ============================================================
   V8.64 · Contact page : h1 corrige (taille comme homepage h2)
   ============================================================ */
.contact-final--v2 h1,
.contact-final h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 var(--sp-4);
}

/* ============================================================
   V8.65 · Banniere cookies (informative, thème du site)
   ============================================================ */
.cookies-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 90;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.25);
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.cookies-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cookies-banner.is-dismissed {
  transform: translateY(30px);
  opacity: 0;
}
.cb-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cb-body {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.cb-body p {
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.cb-body p strong { font-weight: 700; }
.cb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cb-link {
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-link:hover { color: var(--text); }
.cb-accept {
  appearance: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cb-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(47, 107, 216, 0.5);
}

@media (max-width: 640px) {
  .cookies-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .cb-inner {
    gap: 12px;
  }
  .cb-body { flex-basis: 100%; }
  .cb-body p { font-size: 0.82rem; }
  .cb-actions {
    width: 100%;
    justify-content: space-between;
  }
  .cb-accept { padding: 9px 14px; font-size: 0.82rem; }
  .cb-link { font-size: 0.78rem; }
}

/* ============================================================
   V8.65 · Legal pages : petite date de mise a jour
   ============================================================ */
.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.02em;
  margin-top: -20px !important;
  margin-bottom: 40px !important;
}

/* ============ V8.67 · Ligne de separation entre sections ============ */
.section-divider {
  display: block;
  width: min(1200px, calc(100% - 48px));
  max-width: 1200px;
  height: 1px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: rgba(26, 26, 26, 0.18);
}
@media (max-width: 720px) {
  .section-divider {
    width: calc(100% - 32px);
  }
}