/* ==========================================================================
   VITRINE : système visuel des pages métier (v2)
   Tout ce qui est "image" est dessiné en code : téléphones, feed Instagram,
   fiche Google, stories, reels. Aucune photo, aucun pictogramme au trait.
   Couleurs et typos de la marque conservées, palette élargie par métier.
   ========================================================================== */

.v-page {
  /* Palette chaude élargie. Chaque métier peut surcharger ces 6 teintes. */
  --v-1: #f3d9cf;   /* rose poudré */
  --v-2: #e8b86a;   /* miel */
  --v-3: #c7834a;   /* caramel */
  --v-4: #9fb3a0;   /* sauge */
  --v-5: #5b2a3c;   /* prune */
  --v-6: var(--c-brique, #8b3b29);
  --v-light: #fbf8f4;
  --v-mist: #f2ece4;
  --v-night: #171210;
  --v-card: #ffffff;
  --v-radius: 28px;
  --v-radius-sm: 18px;
  --v-shadow: 0 30px 60px -30px rgba(40, 22, 14, .35), 0 8px 20px -12px rgba(40, 22, 14, .18);
  --v-shadow-soft: 0 18px 40px -24px rgba(40, 22, 14, .28);
  --v-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Supreme', system-ui, sans-serif;
  background: var(--v-light);
}

/* --------------------------------------------------------------------------
   Sections : rythme Apple, une idée par écran, séparations nettes
   -------------------------------------------------------------------------- */
.v-sec { position: relative; padding-block: clamp(5rem, 11vh + 2rem, 9.5rem); overflow: clip; }
.v-sec--light { background: var(--v-light); color: var(--c-ink); }
.v-sec--mist { background: var(--v-mist); color: var(--c-ink); }
.v-sec--white { background: #fff; color: var(--c-ink); }
.v-sec--dark {
  background: var(--v-night); color: #f7f1ea;
  --fg-muted: rgba(247, 241, 234, .72);
  --c-line: rgba(247, 241, 234, .16);
}
.v-wrap { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }
.v-center { text-align: center; margin-inline: auto; }

.v-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem;
}
.v-sec--dark .v-eyebrow { color: var(--v-2); }
.v-eyebrow__n { opacity: .6; }
.v-title {
  font-family: var(--f-display); font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1.02;
  margin: 0 0 1.2rem; max-width: 18ch; text-wrap: balance;
}
.v-center .v-title, .v-title.v-center { margin-inline: auto; }
.v-title em, .v-title .accented { font-style: italic; color: var(--accent); }
.v-sec--dark .v-title em, .v-sec--dark .v-title .accented { color: var(--v-2); }
.v-lead {
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55;
  color: var(--fg-muted, var(--c-ink-2)); max-width: 40rem; margin: 0;
  text-wrap: pretty;
}
.v-center .v-lead { margin-inline: auto; }
.v-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.v-hero { padding-top: clamp(6.5rem, 11vh, 8rem); padding-bottom: 0; background: var(--v-light); }
.v-hero .crumbs { justify-content: center; display: flex; }
.v-hero .crumbs ol { justify-content: center; }
.v-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem .45rem .5rem; border-radius: 999px;
  background: #fff; box-shadow: var(--v-shadow-soft);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-2); margin: 1.4rem 0 1.6rem;
}
.v-pill__dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--v-1); display: grid; place-items: center; }
.v-pill__dot::after { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.v-hero__title {
  font-family: var(--f-display); font-weight: 500; letter-spacing: -0.035em;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); line-height: .98;
  margin: 0 auto 1.3rem; max-width: 14ch; text-wrap: balance;
}
.v-hero__title .accented { font-style: italic; color: var(--accent); }
.v-hero .v-lead { max-width: 44rem; }
.v-cta { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; justify-content: center; align-items: center; margin: 2.2rem 0 0; }
.v-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.6rem; border-radius: 999px; font-weight: 500;
  background: var(--accent); color: #fff; text-decoration: none;
  transition: transform .35s var(--e-out), background-color .35s var(--e-out);
}
.v-btn:hover { background: var(--c-brique-deep, #6c2b1c); color: #fff; transform: translateY(-2px); }
.v-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.v-link { color: var(--accent); font-weight: 500; text-decoration: none; }
.v-link::after { content: ' \203A'; display: inline-block; transition: transform .3s var(--e-out); }
.v-link:hover::after { transform: translateX(4px); }
.v-sec--dark .v-link { color: var(--v-2); }

/* Scène du hero : téléphone central + cartes flottantes */
.v-stage {
  position: relative; margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  width: min(100%, 64rem); height: clamp(560px, 62vw, 700px);
  display: grid; justify-items: center; align-items: start;
}
.v-stage__halo {
  position: absolute; left: 50%; bottom: 0; width: min(92vw, 60rem); height: 78%;
  transform: translateX(-50%); border-radius: 48px 48px 0 0;
  background: var(--v-1); overflow: hidden;
}
.v-stage__halo::before, .v-stage__halo::after {
  content: ''; position: absolute; border-radius: 50%;
}
.v-stage__halo::before { width: 38%; aspect-ratio: 1; left: -6%; top: 18%; background: var(--v-2); opacity: .55; }
.v-stage__halo::after { width: 30%; aspect-ratio: 1; right: -4%; top: 34%; background: var(--v-4); opacity: .6; }
.v-stage .phone {
  position: relative; z-index: 2;
  transform: translateY(calc((1 - var(--q, 0)) * 40px)) rotate(calc((1 - var(--q, 0)) * -2deg));
}
.v-caption {
  position: relative; z-index: 3; text-align: center; margin: 1rem auto 0; padding-bottom: 1.2rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3);
}

/* Cartes flottantes */
.float {
  position: absolute; z-index: 3; background: #fff; color: var(--c-ink);
  border-radius: var(--v-radius-sm); box-shadow: var(--v-shadow);
  padding: .9rem 1rem; font-family: var(--v-ui); font-size: .82rem; line-height: 1.35;
  width: max-content; max-width: 16rem;
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay: var(--d, 0ms);
}
.is-live .float { opacity: 1; transform: none; animation: v-bob 6s var(--e-in-out) infinite alternate; animation-delay: calc(var(--d, 0ms) + 900ms); }
@keyframes v-bob { to { translate: 0 -8px; } }
.float__row { display: flex; align-items: center; gap: .6rem; }
.float__ico {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: .9rem;
}
.float__t { font-weight: 600; }
.float__s { color: #6b625a; font-size: .74rem; }
.float__stars { color: #f2a43a; letter-spacing: 2px; font-size: .9rem; }
.float--a { left: 2%; top: 16%; --d: 300ms; }
.float--b { right: 1%; top: 8%; --d: 520ms; }
.float--c { left: 6%; top: 58%; --d: 740ms; }
.float--d { right: 4%; top: 52%; --d: 960ms; }
@media (max-width: 52rem) {
  .float--a { left: 0; top: 4%; } .float--b { right: 0; top: 30%; }
  .float--c, .float--d { display: none; }
  .float { max-width: 12rem; font-size: .74rem; }
}

/* --------------------------------------------------------------------------
   TÉLÉPHONE
   -------------------------------------------------------------------------- */
.phone {
  --w: 300px;
  width: var(--w); aspect-ratio: 9 / 19.3; flex: none;
  background: #0f0d0c; border-radius: calc(var(--w) * .165);
  padding: calc(var(--w) * .035);
  box-shadow: 0 0 0 1.5px #3a3230 inset, 0 0 0 5px #1e1a18, var(--v-shadow);
}
.phone--sm { --w: 210px; }
.phone--md { --w: 260px; }
.phone--lg { --w: clamp(260px, 26vw, 330px); }
.phone__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * .135); background: #fff; color: #111;
  font-family: var(--v-ui);
}
.phone__island {
  position: absolute; z-index: 5; top: 9px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 25px; border-radius: 20px; background: #0f0d0c;
}
.phone__status {
  position: relative; z-index: 4; height: 44px; padding: 14px 22px 0;
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 600;
}
.phone__status i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; top: 1px; }
.phone__status i::after { content: ''; position: absolute; inset: 1px 5px 1px 1px; background: currentColor; border-radius: 1px; }

/* --------------------------------------------------------------------------
   INSTAGRAM (profil)
   -------------------------------------------------------------------------- */
.ig { font-size: 11px; }
.ig__bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 8px; font-weight: 700; font-size: 14px; }
.ig__bar span:last-child { letter-spacing: 3px; }
.ig__top { display: flex; align-items: center; gap: 14px; padding: 2px 14px 8px; }
.ig__avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--v-2), var(--v-6), var(--v-5), var(--v-2));
}
.ig__avatar span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  border: 2.5px solid #fff; background: var(--v-1); color: var(--v-6);
  font-family: var(--f-display); font-style: italic; font-size: 22px;
}
.ig__stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig__stats b { display: block; font-size: 13px; }
.ig__stats small { font-size: 10px; color: #555; }
.ig__bio { padding: 0 14px 8px; line-height: 1.35; }
.ig__bio b { display: block; font-size: 11.5px; }
.ig__bio a { color: #1d4fb8; text-decoration: none; }
.ig__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 14px 10px; }
.ig__btns span { background: #efefef; border-radius: 7px; text-align: center; padding: 6px 0; font-weight: 600; }
.ig__btns span:first-child { background: #0f6fff; color: #fff; }
.ig__hl { display: flex; gap: 12px; padding: 0 14px 10px; }
.ig__hl span { display: grid; justify-items: center; gap: 3px; font-size: 9px; }
.ig__hl span::before { content: ''; width: 44px; height: 44px; border-radius: 50%; background: var(--c, var(--v-1)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ddd; }
.ig__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eee; }
.ig__tabs span { height: 30px; display: grid; place-items: center; }
.ig__tabs span:first-child { border-bottom: 1.5px solid #111; }
.ig__tabs span::before { content: ''; width: 13px; height: 13px; border-radius: 3px; background: #999; }
.ig__tabs span:first-child::before { background: #111; }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.ig__grid > * { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.ig__grid > .is-new { animation: v-pop 1s var(--e-out) both; }
@keyframes v-pop { from { opacity: 0; transform: scale(.7); } }
.ig__grid .art { width: 100%; height: 100%; }

/* Défilement automatique du feed dans le hero */
.ig__scroll { animation: v-feed 14s var(--e-in-out) 2.5s infinite alternate; }
@keyframes v-feed { 0%, 25% { transform: translateY(0); } 75%, 100% { transform: translateY(-34%); } }

/* Les "images" générées */
.art { display: block; width: 100%; height: 100%; }
.art svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Section sombre : trois constats
   -------------------------------------------------------------------------- */
.pain-grid { display: grid; gap: 1.2rem; }
@media (min-width: 56rem) { .pain-grid { grid-template-columns: repeat(3, 1fr); } }
.pain {
  background: #221a17; border-radius: var(--v-radius); padding: 1.8rem 1.8rem 2rem;
  display: grid; grid-template-rows: auto 1fr; gap: 1.6rem; min-height: 26rem;
}
.pain__n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--v-2); }
.pain__text { font-family: var(--f-display); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem); line-height: 1.2; margin: .4rem 0 0; }
.pain__vis { align-self: end; }

/* Agenda aux créneaux vides */
.agenda { background: #fff; color: #222; border-radius: 16px; padding: 12px; font-family: var(--v-ui); font-size: 10.5px; }
.agenda__head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 6px; font-weight: 600; color: #888; text-align: center; }
.agenda__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.agenda__col { display: grid; gap: 5px; }
.slot { height: 20px; border-radius: 5px; background: var(--c, var(--v-1)); }
.slot--empty { background: transparent; border: 1.5px dashed #e3a58f; animation: v-blink 2.4s ease-in-out infinite; }
@keyframes v-blink { 50% { border-color: #f1d4c9; background: #fff6f2; } }

/* Photo "au néon" */
.neon { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.neon .art { filter: saturate(.25) brightness(1.08) contrast(.82) hue-rotate(40deg); }
.neon::after { content: ''; position: absolute; inset: 0; background: #d6f2e2; mix-blend-mode: multiply; opacity: .55; animation: v-flicker 5s steps(1) infinite; }
@keyframes v-flicker { 0%, 100% { opacity: .55; } 42% { opacity: .35; } 44% { opacity: .6; } 46% { opacity: .4; } }
.neon__tag { position: absolute; z-index: 2; left: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-family: var(--f-mono); font-size: 10px; padding: 4px 8px; border-radius: 6px; }

/* Barres d'avis */
.rates { display: grid; gap: 14px; background: #fff; color: #222; border-radius: 16px; padding: 16px; font-family: var(--v-ui); font-size: 12px; }
.rate { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.rate__bar { grid-column: 1 / -1; height: 10px; border-radius: 10px; background: #f0ebe6; overflow: hidden; }
.rate__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c, #f2a43a); transition: width 1.6s var(--e-out) .3s; }
[data-in=true] .rate__bar span, .is-live .rate__bar span { width: var(--w); }
.rate b { font-size: 13px; }

/* --------------------------------------------------------------------------
   BENTO : ce qu'on publie
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
  .bento__a { grid-column: span 3; grid-row: span 2; }
  .bento__b { grid-column: span 3; }
  .bento__c { grid-column: span 3; }
  .bento__d { grid-column: span 3; }
  .bento__e { grid-column: span 3; }
}
.tile {
  position: relative; border-radius: var(--v-radius); overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--bg-t, #fff); color: var(--fg-t, var(--c-ink));
  display: grid; gap: 1.4rem; align-content: space-between;
  transition: transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--v-shadow); }
.tile__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin: 0; }
.tile__t { font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); line-height: 1.15; margin: .5rem 0 0; max-width: 22ch; }
.tile__vis { display: grid; justify-items: center; }
.tile--rose { --bg-t: var(--v-1); }
.tile--miel { --bg-t: #f6e2bd; }
.tile--sauge { --bg-t: #dfe7dc; }
.tile--prune { --bg-t: var(--v-5); --fg-t: #fbeee8; }
.tile--white { --bg-t: #fff; }
.tile--quote { --bg-t: var(--v-6); --fg-t: #fff4ee; }
.tile--quote blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); line-height: 1.3; }

/* Reel avant / après qui tourne en boucle */
.reel { position: absolute; inset: 0; }
.reel__layer { position: absolute; inset: 0; }
.reel__after { clip-path: inset(0 0 0 var(--cut, 50%)); animation: v-wipe 5.5s var(--e-in-out) infinite; }
@keyframes v-wipe { 0%, 12% { --cut: 100%; clip-path: inset(0 0 0 100%); } 50%, 62% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.reel__line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.3); animation: v-line 5.5s var(--e-in-out) infinite; }
@keyframes v-line { 0%, 12% { left: 100%; } 50%, 62% { left: 0%; } 100% { left: 100%; } }
.reel__lbl { position: absolute; top: 56px; z-index: 3; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; }
.reel__lbl--l { left: 12px; } .reel__lbl--r { right: 12px; }
.reel__ui { position: absolute; z-index: 4; left: 12px; right: 48px; bottom: 16px; color: #fff; font-size: 11px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.reel__ui b { display: block; font-size: 12px; margin-bottom: 3px; }
.reel__side { position: absolute; z-index: 4; right: 10px; bottom: 20px; display: grid; gap: 14px; justify-items: center; color: #fff; font-size: 10px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.reel__side span::before { content: ''; display: block; width: 24px; height: 22px; margin: 0 auto 3px; background: #fff; border-radius: 50% 50% 45% 45%; opacity: .95; }
.reel__side span:nth-child(2)::before { border-radius: 6px 6px 6px 1px; }
.reel__side span:nth-child(3)::before { border-radius: 2px; clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%); }

/* Story créneau libre */
.story { position: absolute; inset: 0; background: var(--v-6); color: #fff; display: grid; align-content: center; justify-items: center; text-align: center; padding: 24px; }
.story__bars { position: absolute; top: 48px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.story__bars span { height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.story__bars span::after { content: ''; display: block; height: 100%; width: 0; background: #fff; }
.story__bars span:nth-child(1)::after { width: 100%; }
.story__bars span:nth-child(2)::after { animation: v-prog 5s linear infinite; }
@keyframes v-prog { to { width: 100%; } }
.story__who { position: absolute; top: 60px; left: 14px; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.story__who i { width: 22px; height: 22px; border-radius: 50%; background: var(--v-1); }
.story__k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.story__big { font-family: var(--f-display); font-size: 30px; line-height: 1.05; margin: 10px 0 16px; }
.story__big em { color: var(--v-2); }
.story__sticker { background: #fff; color: var(--v-6); border-radius: 12px; padding: 9px 16px; font-weight: 700; font-size: 12px; transform: rotate(-3deg); animation: v-tap 2.6s var(--e-in-out) infinite; }
@keyframes v-tap { 0%, 70%, 100% { transform: rotate(-3deg) scale(1); } 80% { transform: rotate(-3deg) scale(.92); } }

/* Carrousel technique */
.carousel { width: min(100%, 360px); aspect-ratio: 4 / 5; position: relative; }
.carousel__card {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--v-shadow-soft);
  animation: v-deck 9s var(--e-in-out) infinite; animation-delay: calc(var(--i) * -3s);
}
@keyframes v-deck {
  0%, 26% { transform: translateX(0) rotate(0); z-index: 3; opacity: 1; }
  33% { transform: translateX(-110%) rotate(-8deg); z-index: 3; opacity: 0; }
  34% { transform: translateX(14%) rotate(4deg) scale(.92); z-index: 1; opacity: .7; }
  60% { transform: translateX(7%) rotate(2deg) scale(.96); z-index: 2; opacity: .9; }
  66%, 100% { transform: translateX(0) rotate(0); z-index: 3; opacity: 1; }
}
.carousel__dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.carousel__dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; }
.carousel__dots span:first-child { opacity: .9; }

/* Post produits */
.shelf { width: min(100%, 360px); aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; box-shadow: var(--v-shadow-soft); }

/* --------------------------------------------------------------------------
   AVANT / APRÈS piloté par le scroll (façon Apple)
   -------------------------------------------------------------------------- */
.ba-pin { height: 280vh; padding: 0; }
.ba-pin__sticky {
  position: sticky; top: 0; height: 100vh; min-height: 640px;
  display: grid; align-items: center;
}
.ba-pin__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .ba-pin__grid { grid-template-columns: 1fr auto 1fr; } }
.ba-pin .phone { margin-inline: auto; }
.ba-step { opacity: .28; transition: opacity .5s var(--e-out), transform .5s var(--e-out); transform: translateY(8px); margin: 0 0 1.8rem; }
.ba-step.is-on { opacity: 1; transform: none; }
.ba-step h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); margin: .3rem 0 .4rem; }
.ba-step p { margin: 0; color: var(--fg-muted); max-width: 26ch; }
.ba-step small { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--v-2); letter-spacing: .1em; }
.ba-scrub .reel__after { animation: none; clip-path: inset(0 0 0 calc((1 - var(--q, 0)) * 100%)); }
.ba-scrub .reel__line { animation: none; left: calc((1 - var(--q, 0)) * 100%); }
.ba-meter { height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); margin-top: 2rem; overflow: hidden; max-width: 18rem; }
.ba-meter span { display: block; height: 100%; width: calc(var(--q, 0) * 100%); background: var(--v-2); }
@media (max-width: 59.99rem) {
  .ba-pin { height: auto; padding-block: 5rem; }
  .ba-pin__sticky { position: static; height: auto; min-height: 0; }
  .ba-step { opacity: 1; transform: none; }
  .ba-scrub .reel__after { animation: v-wipe 5.5s var(--e-in-out) infinite; clip-path: none; }
  .ba-scrub .reel__line { animation: v-line 5.5s var(--e-in-out) infinite; }
}

/* --------------------------------------------------------------------------
   SEMAINE : carrousel horizontal de cartes
   -------------------------------------------------------------------------- */
.days {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 21rem); gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: .5rem var(--gutter) 2rem; margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }
@media (min-width: 76rem) { .days { margin-inline: calc((100vw - 76rem) / -2); padding-inline: calc((100vw - 76rem) / 2); scroll-padding-inline: calc((100vw - 76rem) / 2); } }
.day {
  scroll-snap-align: start; border-radius: var(--v-radius); overflow: hidden;
  background: var(--bg-t, #fff); color: var(--fg-t, var(--c-ink));
  display: grid; grid-template-rows: auto 1fr; min-height: 30rem;
}
.day__txt { padding: 1.6rem 1.6rem .6rem; }
.day__when { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin: 0; }
.day__what { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; margin: .5rem 0 .4rem; }
.day__note { margin: 0; font-size: var(--t-sm); opacity: .8; }
.day__vis { display: grid; justify-items: center; align-items: end; padding-top: 1rem; }
.day__vis .phone { margin-bottom: -120px; }
.days-nav { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .4rem; }
.days-nav button {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; cursor: pointer;
  background: #e7dfd5; color: var(--c-ink); font-size: 1.1rem; transition: background-color .3s;
}
.days-nav button:hover { background: #dcd2c5; }
.days-nav button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Petits écrans des cartes semaine */
.mini-plan { padding: 56px 12px 12px; display: grid; gap: 7px; font-size: 10px; }
.mini-plan div { display: flex; gap: 7px; align-items: center; background: #f6f1eb; border-radius: 9px; padding: 8px; }
.mini-plan i { width: 26px; height: 26px; border-radius: 7px; background: var(--c); flex: none; }
.rec { position: absolute; inset: 0; }
.rec__hud { position: absolute; z-index: 3; top: 52px; left: 12px; right: 12px; display: flex; justify-content: space-between; color: #fff; font-family: var(--f-mono); font-size: 10px; }
.rec__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; margin-right: 5px; animation: v-rec 1.2s steps(1) infinite; }
@keyframes v-rec { 50% { opacity: .2; } }
.rec__frame { position: absolute; z-index: 3; inset: 90px 26px 110px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 8px; }
.rec__btn { position: absolute; z-index: 3; bottom: 34px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; }
.rec__btn::after { content: ''; position: absolute; inset: 7px; border-radius: 6px; background: #ff3b30; }

/* --------------------------------------------------------------------------
   RASSURANCE : fiche Google + engagements
   -------------------------------------------------------------------------- */
.assure { display: grid; gap: 1.2rem; }
@media (min-width: 60rem) { .assure { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.gcard { background: #fff; border-radius: var(--v-radius); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--v-shadow-soft); font-family: var(--v-ui); color: #202124; }
.gcard__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.gcard__logo { width: 52px; height: 52px; border-radius: 14px; background: var(--v-1); display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: 24px; color: var(--v-6); }
.gcard__name { font-size: 17px; font-weight: 600; }
.gcard__meta { font-size: 13px; color: #5f6368; }
.gcard__meta b { color: #202124; }
.gcard__stars { color: #f2a43a; letter-spacing: 1px; }
.gcard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.gcard__actions span { border: 1px solid #dadce0; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: #1a73e8; }
.review { border-top: 1px solid #eee; padding-top: 14px; font-size: 13px; }
.review__who { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.review__who i { width: 26px; height: 26px; border-radius: 50%; background: var(--v-4); }
.review p { margin: 6px 0 0; line-height: 1.45; }
.reply { margin: 12px 0 0 18px; padding: 10px 12px; background: #f6f3ef; border-radius: 12px; font-size: 12.5px; }
.reply__who { font-weight: 600; margin-bottom: 3px; }
.reply__txt { min-height: 3.2em; }
.reply__txt::after { content: '|'; margin-left: 1px; animation: v-rec 1s steps(1) infinite; color: var(--v-6); }
.reply.is-done .reply__txt::after { display: none; }
.promises { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.promise {
  border-radius: var(--v-radius); padding: 1.5rem; background: var(--bg-t, #fff);
  display: grid; align-content: space-between; gap: 1.2rem; min-height: 11rem;
}
.promise__big { font-family: var(--f-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; color: var(--accent); }
.promise p { margin: 0; font-size: var(--t-sm); line-height: 1.45; }

/* --------------------------------------------------------------------------
   DEUX PORTES D'ENTRÉE (tuiles produit façon Apple)
   -------------------------------------------------------------------------- */
.doors { display: grid; gap: 1.2rem; }
@media (min-width: 56rem) { .doors { grid-template-columns: 1fr 1fr; } }
.door2 {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--v-radius); background: var(--bg-t); color: var(--fg-t, var(--c-ink));
  text-decoration: none; min-height: 40rem; text-align: center;
  transition: transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.door2:hover { transform: translateY(-5px); box-shadow: var(--v-shadow); color: var(--fg-t, var(--c-ink)); }
.door2:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.door2__txt { padding: 2.6rem 2rem 1rem; display: grid; justify-items: center; gap: .6rem; }
.door2__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0; }
.door2 h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; margin: 0; max-width: 18ch; }
.door2__desc { margin: 0; font-size: var(--t-sm); opacity: .82; max-width: 36ch; }
.door2__price { font-weight: 600; margin: .4rem 0 0; }
.door2__go { color: var(--accent); font-weight: 500; }
.door2__go::after { content: ' \203A'; }
.door2__vis { display: grid; justify-items: center; align-items: end; }
.door2__vis .phone { margin-bottom: -150px; }
.cross2 { text-align: center; margin: 2rem 0 0; color: var(--c-ink-2); }
.cross2 a { color: var(--accent); }

/* Navigateur (maquette de site) */
.browser {
  width: min(92%, 430px); margin-bottom: -40px; border-radius: 14px 14px 0 0; overflow: hidden;
  background: #fff; box-shadow: var(--v-shadow); font-family: var(--v-ui); text-align: left; color: #222;
}
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #efebe6; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d7cfc6; }
.browser__bar span { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; font-size: 10px; padding: 4px 8px; color: #777; }
.browser__hero { position: relative; height: 170px; background: var(--v-5); overflow: hidden; }
.browser__hero .art { position: absolute; right: 0; top: 0; width: 45%; height: 100%; }
.browser__hero-t { position: absolute; left: 16px; top: 34px; color: #fff; font-family: var(--f-display); font-size: 22px; line-height: 1.05; max-width: 55%; }
.browser__cta { position: absolute; left: 16px; bottom: 22px; background: var(--v-2); color: var(--v-5); font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; animation: v-tap 2.6s var(--e-in-out) infinite; }
.browser__rows { padding: 14px 16px 60px; display: grid; gap: 7px; font-size: 11px; }
.browser__rows div { display: flex; justify-content: space-between; border-bottom: 1px dashed #e4dcd3; padding-bottom: 6px; }

/* FAQ et formulaire : on garde les composants existants, on ajuste le fond */
.v-faq { background: var(--v-light); }
.v-page .form-block { background: var(--v-mist); }

/* Accessibilité : pas d'animation si demandé */
@media (prefers-reduced-motion: reduce) {
  .v-page *, .v-page *::before, .v-page *::after { animation: none !important; transition: none !important; }
  .float { opacity: 1; transform: none; }
  .reel__after { clip-path: inset(0 0 0 50%); }
  .reel__line { left: 50%; }
}

/* Téléphones coupés en bas de tuile, façon Apple */
.tile__vis--crop { margin-bottom: calc(-1 * clamp(1.6rem, 3vw, 2.4rem)); height: 22rem; overflow: hidden; align-items: start; }
.bento__a .tile__vis--crop { height: 40rem; }
.bento__a .phone { --w: 330px; }
.carousel { width: min(100%, 290px); }
.v-sec--dark .crumbs a { color: inherit; }

/* Titre plus contenu dans la scène épinglée */
.ba-pin .v-title { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); }
.ba-pin__grid { gap: 3rem; }
@media (min-width: 60rem) {
  .bento__a { grid-template-rows: auto 1fr; align-content: stretch; }
  .bento__a .tile__vis--crop { height: 0; min-height: 100%; overflow: visible; margin-bottom: 0; padding-top: 1rem; }
}
@media (max-width: 52rem) {
  .v-stage { height: auto; padding-bottom: 2.5rem; }
  .v-stage .phone { --w: min(300px, 78vw); }
}

/* ==========================================================================
   v2.1 : composants ajoutés pour le déploiement sur tous les métiers
   ========================================================================== */

/* Constats : visuels supplémentaires */
.neon--blur .art { filter: blur(5px) saturate(.35) brightness(1.05); }
.neon--blur::after { background: #efe9e2; opacity: .35; animation: none; }
.vcard { background: #fff; color: #222; border-radius: 16px; padding: 14px; font-family: var(--v-ui); font-size: 12px; display: grid; gap: 9px; }
.vcard__k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a8178; }
.mapres { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: #f6f3ef; }
.mapres i { width: 30px; height: 30px; border-radius: 8px; background: var(--c, #9fb3a0); }
.mapres b { display: block; font-size: 12px; }
.mapres small { color: #8a8178; }
.mapres--you { background: transparent; border: 1.5px dashed #e3a58f; opacity: .7; animation: v-blink 2.4s ease-in-out infinite; }
.pricecmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pricecmp div { border-radius: 12px; padding: 12px; background: #f6f3ef; display: grid; gap: 4px; }
.pricecmp div:last-child { background: var(--accent); color: #fff; }
.pricecmp small { font-size: 10.5px; opacity: .75; }
.pricecmp b { font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.15; }
.dorm { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.dorm i { width: 44px; height: 44px; border-radius: 50%; background: #e7e0d7; }
.dorm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.dorm__grid span { aspect-ratio: 1; background: #ece6de; border-radius: 3px; }
.dorm__last { color: #b8392e; font-weight: 600; }
.callrow { display: flex; align-items: center; gap: 10px; }
.callrow i { width: 28px; height: 28px; border-radius: 50%; background: #fde3de; display: grid; place-items: center; color: #d9412f; font-style: normal; font-weight: 700; }
.callrow small { margin-left: auto; color: #8a8178; }
.bubble { justify-self: start; max-width: 85%; background: #efebe6; border-radius: 16px 16px 16px 4px; padding: 8px 12px; }
.bubble:nth-child(odd) { justify-self: end; border-radius: 16px 16px 4px 16px; background: #e8eefc; }
.flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: center; gap: 6px; text-align: center; }
.flow span { padding: 10px 6px; border-radius: 10px; background: #f6f3ef; font-weight: 600; }
.flow span.is-mid { background: #fde3de; color: #b8392e; }
.flow em { font-style: normal; color: #b0a79e; }
.flow__cut { text-align: center; font-family: var(--f-display); font-size: 26px; color: #b8392e; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.bars div { flex: 1; display: grid; gap: 4px; justify-items: center; align-self: stretch; grid-template-rows: 1fr auto; }
.bars span { align-self: end; width: 100%; border-radius: 6px 6px 3px 3px; background: var(--c, #e8b86a); height: 0; transition: height 1.2s var(--e-out); }
.is-live .bars span, [data-in=true] .bars span { height: var(--h); }
.bars small { font-size: 9.5px; color: #8a8178; }

/* Mini écrans supplémentaires */
.mini-review { position: absolute; inset: 0; background: #f6f3ef; padding: 64px 12px 12px; display: grid; align-content: start; gap: 10px; }
.mini-review .vcard { font-size: 11px; }
.mini-post { position: absolute; inset: 0; background: #fff; padding-top: 44px; font-size: 10.5px; }
.mini-post__head { display: flex; align-items: center; gap: 7px; padding: 6px 10px; font-weight: 600; }
.mini-post__head i { width: 22px; height: 22px; border-radius: 50%; background: var(--v-1); }
.mini-post__img { aspect-ratio: 4 / 5; }
.mini-post__txt { padding: 8px 10px; line-height: 1.4; }
.mini-post__txt b { margin-right: 4px; }

/* Réseaux sociaux : publications en cartes */
.posts { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .posts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .posts { grid-template-columns: repeat(4, 1fr); } }
.post { background: #fff; border-radius: var(--v-radius-sm); overflow: hidden; box-shadow: var(--v-shadow-soft); font-family: var(--v-ui); transition: transform .5s var(--e-out); }
.post:hover { transform: translateY(-4px); }
.post__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; }
.post__head i { width: 26px; height: 26px; border-radius: 50%; background: var(--v-1); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.post__img { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.post__img .reel { position: absolute; inset: 0; }
.post__icons { display: flex; gap: 10px; padding: 10px 12px 4px; }
.post__icons span { width: 20px; height: 18px; border-radius: 50% 50% 45% 45%; background: #222; opacity: .85; }
.post__icons span:nth-child(2) { border-radius: 6px 6px 6px 1px; }
.post__icons span:nth-child(3) { clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%); border-radius: 0; }
.post__cap { padding: 4px 12px 14px; font-size: 13px; line-height: 1.45; color: #222; }
.post__cap b { margin-right: 5px; }
.v-quote { margin-top: 1.2rem; border-radius: var(--v-radius); background: var(--accent); color: #fff4ee; padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: .8rem; }
.v-quote p { margin: 0; }
.v-quote blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 2rem); line-height: 1.3; max-width: 46ch; }

/* Inclus partout */
.incl { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 60rem) { .incl { grid-template-columns: repeat(4, 1fr); } }
.incl__item { border-radius: var(--v-radius-sm); padding: 1.3rem 1.3rem 1.5rem; background: var(--bg-t, #fff); display: grid; gap: 2.2rem; align-content: space-between; min-height: 9.5rem; }
.incl__n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--accent); }
.incl__item p { margin: 0; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.25; }

/* Formules façon Apple */
.plans { display: grid; gap: 1.2rem; align-items: stretch; }
@media (min-width: 60rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan2 { position: relative; border-radius: var(--v-radius); background: #fff; padding: 2rem 1.8rem; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.2rem; box-shadow: var(--v-shadow-soft); }
.plan2--featured { background: var(--v-night); color: #f7f1ea; }
.plan2__flag { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--v-2); color: var(--v-night); padding: .35rem .6rem; border-radius: 999px; }
.plan2__name { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; margin: 0; }
.plan2__price { margin: .4rem 0 0; font-family: var(--f-display); font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.plan2__price small { font-family: var(--v-ui); font-size: .95rem; opacity: .65; letter-spacing: 0; margin-left: .3rem; }
.plan2__price .plan2__from { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin: 0 0 .3rem; }
.plan2__pitch { margin: .6rem 0 0; opacity: .8; }
.plan2__for { margin: 0; font-size: var(--t-sm); opacity: .7; }
.plan2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--t-sm); }
.plan2 li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; line-height: 1.4; }
.plan2 li::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); margin-top: .45em; }
.plan2--featured li::before { background: var(--v-2); }
.plan2__xl { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: .6rem 0 -.2rem; }
.plan2__cta { justify-self: stretch; text-align: center; justify-content: center; }
.plan2--featured .plan2__cta { background: var(--v-2); color: var(--v-night); }
.maint2 { margin-top: 1.2rem; display: grid; gap: 1.2rem; }
@media (min-width: 56rem) { .maint2 { grid-template-columns: 1fr 1fr; } }
.maint2 > div { border-radius: var(--v-radius-sm); background: var(--v-mist); padding: 1.4rem 1.6rem; }
.maint2 h3 { font-family: var(--f-display); font-weight: 500; margin: 0 0 .6rem; font-size: 1.3rem; }
.maint2 ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); display: grid; gap: .3rem; }
.v-note { text-align: center; color: var(--fg-muted, #6b625a); font-size: var(--t-sm); margin: 1.6rem auto 0; max-width: 46rem; }
.v-note a { color: var(--accent); }

/* Sites : plan du site et résultats de recherche */
.sitemap { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 60rem) { .sitemap { grid-template-columns: repeat(3, 1fr); } }
.spage { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--v-shadow-soft); font-family: var(--v-ui); transition: transform .5s var(--e-out); }
.spage:hover { transform: translateY(-4px) rotate(-.4deg); }
.spage__bar { display: flex; gap: 5px; align-items: center; padding: 8px 10px; background: #efebe6; font-size: 10px; color: #777; }
.spage__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d7cfc6; }
.spage__bar span { margin-left: 6px; }
.spage__hero { height: 88px; position: relative; overflow: hidden; background: var(--bg-t, var(--v-5)); }
.spage__hero .art { position: absolute; right: 0; top: 0; width: 42%; height: 100%; }
.spage__t { position: absolute; left: 12px; bottom: 12px; font-family: var(--f-display); font-size: 17px; color: #fff; max-width: 60%; line-height: 1.1; }
.spage__lines { padding: 10px 12px 14px; display: grid; gap: 6px; }
.spage__lines span { height: 7px; border-radius: 4px; background: #eee8e1; }
.spage__lines span:nth-child(2) { width: 80%; } .spage__lines span:nth-child(3) { width: 55%; }
.spage__n { font-family: var(--f-mono); font-size: 10px; color: var(--accent); padding: 0 12px 12px; }
.serp { background: #fff; border-radius: var(--v-radius); box-shadow: var(--v-shadow-soft); padding: 1.2rem; font-family: var(--v-ui); color: #202124; display: grid; gap: 12px; }
.serp__q { border-radius: 999px; border: 1px solid #dfe1e5; padding: 10px 16px; font-size: 14px; display: flex; justify-content: space-between; }
.serp__map { height: 150px; border-radius: 14px; background: #e8efe6; position: relative; overflow: hidden; }
.serp__map::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 38px, #fff 38px 44px), repeating-linear-gradient(20deg, transparent 0 60px, #f4f1ea 60px 70px); opacity: .9; }
.serp__pin { position: absolute; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #b0a79e; }
.serp__pin--you { background: #d9412f; width: 30px; height: 30px; animation: v-pinb 2s var(--e-in-out) infinite; }
@keyframes v-pinb { 50% { translate: 0 -6px; } }
.serp__res { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.serp__res--you { background: #fdf1ec; box-shadow: 0 0 0 1.5px var(--accent) inset; }
.serp__res b { color: #1a0dab; font-weight: 500; font-size: 15px; }
.serp__res small { color: #5f6368; }
.split2 { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 60rem) { .split2 { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.split2__cards { display: grid; gap: 1rem; }
.scard { border-radius: var(--v-radius-sm); background: var(--bg-t, var(--v-mist)); padding: 1.4rem 1.6rem; }
.scard h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; margin: 0 0 .5rem; }
.scard p { margin: 0; color: var(--fg-muted, var(--c-ink-2)); line-height: 1.55; }
.v-sec--dark .scard { background: #221a17; }

/* Scène du hero, variante site internet */
.v-stage--site { height: clamp(520px, 52vw, 640px); }
.v-stage--site .browser { width: min(88%, 720px); margin: 0; transform: translateY(calc((1 - var(--q, 0)) * 30px)); position: relative; z-index: 2; border-radius: 16px; }
.v-stage--site .browser__hero { height: clamp(220px, 26vw, 320px); }
.v-stage--site .browser__hero-t { font-size: clamp(22px, 2.6vw, 36px); top: 18%; }
.v-stage--site .browser__rows { font-size: 13px; padding-bottom: 30px; }
.v-stage--site .phone { position: absolute; z-index: 3; right: 6%; top: 18%; }
.msite { position: absolute; inset: 0; background: #fff; }
.msite__hero { height: 46%; background: var(--v-5); position: relative; overflow: hidden; }
.msite__hero .art { position: absolute; inset: 0; opacity: .9; }
.msite__t { position: absolute; left: 12px; bottom: 12px; color: #fff; font-family: var(--f-display); font-size: 17px; line-height: 1.1; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.msite__rows { padding: 12px; display: grid; gap: 8px; font-size: 10px; }
.msite__rows div { display: flex; justify-content: space-between; border-bottom: 1px dashed #e4dcd3; padding-bottom: 5px; }
.msite__call { position: absolute; left: 12px; right: 12px; bottom: 16px; background: var(--accent); color: #fff; border-radius: 12px; text-align: center; padding: 10px; font-weight: 700; font-size: 11px; animation: v-tap 2.6s var(--e-in-out) infinite; }
@media (max-width: 52rem) {
  .v-stage--site { height: auto; padding-bottom: 2rem; }
  .v-stage--site .phone { --w: 150px; right: 2%; top: 30%; }
}

/* ==========================================================================
   Formules réseaux sociaux : les quantités se lisent en un coup d'œil
   ========================================================================== */
.socle { border-radius: var(--v-radius); background: #fff; box-shadow: var(--v-shadow-soft); padding: 1.6rem 1.8rem; margin: 0 0 1.4rem; }
.socle__k { margin: 0 0 1rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.socle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.socle li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; font-size: var(--t-sm); line-height: 1.4; }
.socle li::before { content: '✓'; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent-wash, #f2e6e1); color: var(--accent); font-size: .75rem; font-weight: 700; }

.plans3 { display: grid; gap: 1.2rem; align-items: stretch; }
@media (min-width: 62rem) { .plans3 { grid-template-columns: repeat(3, 1fr); } }
.plan3 { position: relative; border-radius: var(--v-radius); background: #fff; padding: 2rem 1.7rem 1.8rem; display: grid; grid-template-rows: auto auto auto auto auto 1fr auto auto; gap: 1.25rem; box-shadow: var(--v-shadow-soft); }
.plan3--featured { background: var(--v-night); color: #f7f1ea; box-shadow: var(--v-shadow); }
@media (min-width: 62rem) { .plan3--featured { transform: translateY(-10px); } }
.plan3__name { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; margin: 0; }
.plan3__price { margin: .35rem 0 0; font-family: var(--f-display); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.3rem); line-height: 1; letter-spacing: -.02em; }
.plan3__price small { font-family: var(--v-ui); font-size: .95rem; opacity: .6; letter-spacing: 0; margin-left: .3rem; }
.plan3__pitch { margin: .6rem 0 0; opacity: .8; }
.q { display: grid; gap: .55rem; padding-top: 1.1rem; border-top: 1px solid rgba(31, 22, 20, .09); }
.plan3--featured .q { border-top-color: rgba(247, 241, 234, .14); }
.q__vis { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.q__label { margin: 0; font-size: var(--t-sm); line-height: 1.4; }
.q__label b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; margin-right: .15rem; }
.q__label small { opacity: .65; }

/* pastilles et carrés : vides en pointillé, pleins en couleur */
.q__venue, .q__video, .q__post, .q__g { display: block; flex: none; transform: scale(.6); opacity: .0; transition: transform .6s var(--ease-overshoot, cubic-bezier(.34,1.42,.64,1)), opacity .4s, background-color .4s; transition-delay: calc(var(--i) * 45ms); }
.is-live .q__venue, .is-live .q__video, .is-live .q__post, .is-live .q__g { transform: scale(1); opacity: 1; }
.q__venue { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed rgba(31, 22, 20, .18); display: grid; place-items: center; }
.q__venue.is-on { border: 0; background: var(--accent); }
.q__venue.is-on::after { content: ''; width: 20px; height: 14px; border-radius: 4px; background: #fff; box-shadow: 8px 0 0 -3px #fff; clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 10%, 100% 90%, 70% 70%, 70% 100%, 0 100%); }
.q__video { width: 34px; height: 44px; border-radius: 8px; border: 2px dashed rgba(31, 22, 20, .18); display: grid; place-items: center; }
.q__video.is-on { border: 0; background: #e8b86a; }
.q__video.is-on::after { content: ''; width: 0; height: 0; border-left: 11px solid #1f1614; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.q__post { width: 18px; height: 22px; border-radius: 4px; border: 1.5px dashed rgba(31, 22, 20, .16); }
.q__post.is-on { border: 0; background: var(--accent); opacity: .85; }
.q__post.is-on.is-video { background: #e8b86a; }
.q__g { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed rgba(31, 22, 20, .18); }
.q__g.is-on { border: 0; background: #1a73e8; }
.plan3--featured .q__venue, .plan3--featured .q__video, .plan3--featured .q__post, .plan3--featured .q__g { border-color: rgba(247, 241, 234, .22); }
.plan3--featured .q__venue.is-on { background: #e8b86a; }
.plan3--featured .q__venue.is-on::after { background: #1f1614; box-shadow: 8px 0 0 -3px #1f1614; }
.plan3--featured .q__post.is-on { background: #f7f1ea; }
.plan3--featured .q__post.is-on.is-video { background: #e8b86a; }
.plan3__extras { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.plan3__extras li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; }
.plan3__extras li::before { content: '+'; font-weight: 700; color: var(--accent); }
.plan3--featured .plan3__extras li::before { color: #e8b86a; }
.plan3__extras--empty li::before { content: ''; }
.plan3__eng { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.plan3__cta { justify-content: center; }
.plan3--featured .plan3__cta { background: #e8b86a; color: #1f1614; }
@media (prefers-reduced-motion: reduce) { .q__venue, .q__video, .q__post, .q__g { transform: none; opacity: 1; } }

/* Menu : une pastille de couleur par métier, plus de pictogramme au trait */
.navmenu__metiers .navdot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tone, var(--c-brique)); margin-right: .1rem; }

/* Formules : bandeau de réassurance sous les prix */
.reassure { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 56rem) { .reassure { grid-template-columns: repeat(3, 1fr); } }
.reassure__i { border-radius: var(--v-radius-sm); background: #fff; padding: 1.2rem 1.4rem; border: 1px solid rgba(20,17,15,.08); }
.reassure__i p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--c-ink-2); }
.reassure__k { font-family: var(--f-mono); font-size: 10.5px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; margin-bottom: .5rem !important; }
@media (min-width: 60rem) { .q--posts .q__vis { gap: 3px; flex-wrap: nowrap; } .q--posts .q__post { width: 15px; height: 15px; border-radius: 3px; } }

/* ==========================================================================
   v2.2 : composants des pages hors métiers (accueil, piliers, tarifs, agence…)
   ========================================================================== */
.v-sec--tight { padding-block: 2.5rem 3rem; }
.v-hero--home .v-hero__title { max-width: 16ch; }

/* Scène à trois téléphones */
.v-stage--tri .phone { position: relative; z-index: 2; }
.v-stage--tri .tri__l, .v-stage--tri .tri__r { position: absolute; z-index: 1; top: 12%; }
.v-stage--tri .tri__l { left: 14%; transform: rotate(-6deg) translateY(calc((1 - var(--q, 0)) * 60px)); }
.v-stage--tri .tri__r { right: 14%; transform: rotate(6deg) translateY(calc((1 - var(--q, 0)) * 60px)); }
@media (max-width: 60rem) { .v-stage--tri .tri__l, .v-stage--tri .tri__r { display: none; } }

/* Défilement des métiers */
.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; gap: .6rem; width: max-content; animation: v-tick 90s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes v-tick { to { transform: translateX(-50%); } }
.tick { flex: none; padding: .7rem 1.1rem; border-radius: 999px; background: var(--bg-t); color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: var(--t-sm); transition: transform .3s var(--e-out); }
.tick:hover { transform: translateY(-2px); color: var(--c-ink); }
.tick:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.pain__sub { margin: .7rem 0 0; font-size: var(--t-sm); line-height: 1.55; color: rgba(247,241,234,.72); }
.pain-grid--4 { list-style: none; padding: 0; }
@media (min-width: 56rem) { .pain-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* Tuiles liens de l'accueil */
.tile--link { text-decoration: none; color: var(--fg-t, var(--c-ink)); }
.tile--link:hover { color: var(--fg-t, var(--c-ink)); }
.tile--link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.tile--sauge { --bg-t: #dfe7dc; }
.tile__p { margin: .7rem 0 0; font-size: var(--t-sm); line-height: 1.55; opacity: .82; max-width: 44ch; }
.tile__price { margin: 1rem 0 0; font-weight: 600; display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.tile--prune .door2__go { color: var(--v-2); }
.bento--home .browser { margin: 0 auto -40px; }
.big30 { font-family: var(--f-display); font-size: clamp(4rem, 3rem + 5vw, 8rem); line-height: 1; color: var(--accent); letter-spacing: -.04em; }
.stats { display: grid; gap: 1.2rem; margin-top: 1.2rem; }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border-radius: var(--v-radius); background: var(--v-night); color: #f7f1ea; padding: 1.8rem; text-align: left; }
.stat__big { display: block; font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--v-2); margin-bottom: .8rem; }
.stat p { margin: 0; opacity: .8; }

.days--4 { grid-auto-columns: min(82vw, 19rem); }
@media (min-width: 76rem) { .days--4 { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }
.promises--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 60rem) { .promises--4 { grid-template-columns: repeat(4, 1fr); } }

/* Tuiles métiers */
.ttiles { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); text-align: left; }
@media (min-width: 48rem) { .ttiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .ttiles { grid-template-columns: repeat(4, 1fr); } }
.ttiles--sm { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .ttiles--sm { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 70rem) { .ttiles--sm { grid-template-columns: repeat(6, 1fr); } }
.ttile { display: grid; grid-template-rows: 1fr auto; border-radius: var(--v-radius-sm); overflow: hidden; background: var(--bg-t); text-decoration: none; color: var(--c-ink); transition: transform .5s var(--e-out), box-shadow .5s var(--e-out); }
.ttile:hover { transform: translateY(-4px); box-shadow: var(--v-shadow); color: var(--c-ink); }
.ttile:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.ttile__vis { aspect-ratio: 4 / 3; overflow: hidden; }
.ttile__vis .art { transition: transform .8s var(--e-out); }
.ttile:hover .ttile__vis .art { transform: scale(1.05); }
.ttile__txt { padding: .9rem 1rem 1.1rem; display: grid; gap: .2rem; background: rgba(255,255,255,.55); }
.ttile__k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.ttile__txt b { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; line-height: 1.15; }
.ttile--sm .ttile__vis { aspect-ratio: 1; }
.ttile--sm .ttile__k { display: none; }
.ttile--sm .ttile__txt b { font-size: 1rem; }

/* Notifications (automatisation) */
.nlist { display: grid; gap: 8px; width: 100%; max-width: 360px; font-family: var(--v-ui); }
.nlist__i { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: #fff; color: #222; border-radius: 14px; padding: 10px 12px; box-shadow: var(--v-shadow-soft); font-size: 12px;
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--e-out), transform .6s var(--e-out); transition-delay: calc(var(--i) * 180ms); }
.is-live .nlist__i, [data-in=true] .nlist__i, .auto-screen .nlist__i { opacity: 1; transform: none; }
.nlist__i b { display: block; font-size: 12.5px; }
.nlist__i small { color: #8a8178; }
.nlist__t { align-self: start; }
.auto-screen { position: absolute; inset: 44px 0 0; background: #f4f1ec; padding-top: 8px; display: grid; align-content: start; gap: 8px; }
.auto-screen .nlist { padding: 0 10px; max-width: none; }
.auto-screen .nlist__i { font-size: 10.5px; padding: 8px 9px; }
.auto-screen .nlist__i b { font-size: 11px; }
.auto-screen .float__ico { width: 1.8rem; height: 1.8rem; font-size: .8rem; }

/* Tuiles « pourquoi » (sites, automatisation) */
.wtiles { display: grid; gap: 1.2rem; text-align: left; }
@media (min-width: 56rem) { .wtiles { grid-template-columns: repeat(2, 1fr); } .wtiles--3 { grid-template-columns: repeat(3, 1fr); } }
.wtile { border-radius: var(--v-radius); background: var(--bg-t); padding: 1.8rem; display: grid; gap: 1.6rem; align-content: space-between; min-height: 22rem; }
.wtile__vis { display: grid; justify-items: center; align-items: end; }
.wtile__vis .vcard, .wtile__vis .serp { width: min(100%, 360px); }
.chat { display: grid; gap: 8px; font-family: var(--v-ui); font-size: 12.5px; }
.chat .bubble { background: #fff; }
.chat .bubble--me { justify-self: end; background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.chat .bubble:not(.bubble--me) { justify-self: start; border-radius: 16px 16px 16px 4px; }
.gauge { position: relative; width: 220px; aspect-ratio: 2 / 1.15; display: grid; justify-items: center; align-content: end; font-family: var(--v-ui); }
.gauge__arc { position: absolute; inset: 0 0 12% 0; border-radius: 220px 220px 0 0; background: conic-gradient(from -90deg at 50% 100%, #2f8f5b 0 calc(var(--g, 0) * 170deg), rgba(0,0,0,.08) 0 180deg, transparent 0); transition: --g 1.4s; }
.gauge::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 12%; top: 26%; border-radius: 200px 200px 0 0; background: var(--bg-t, #f6e2bd); }
.is-live .gauge__arc, [data-in=true] .gauge__arc { --g: 1; }
@property --g { syntax: '<number>'; inherits: true; initial-value: 0; }
.gauge b { position: relative; z-index: 1; font-family: var(--f-display); font-size: 2.4rem; line-height: 1; }
.gauge small { position: relative; z-index: 1; color: #6b625a; }
.serp--mini { padding: .8rem; gap: 8px; }
.serp--mini .serp__map { height: 120px; }

/* Clipping */
.v-stage--clip { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; height: auto; padding-bottom: 3rem; }
.tl { position: relative; z-index: 2; width: min(92%, 620px); background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--v-shadow-soft); display: grid; gap: 8px; }
.tl__bar { display: grid; grid-template-columns: repeat(32, 1fr); gap: 2px; height: 34px; }
.tl__seg { border-radius: 3px; background: #ece6de; }
.tl__seg.is-pick { background: var(--accent); animation: v-pick 3s var(--e-in-out) infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes v-pick { 50% { transform: scaleY(1.25); } }
.clip { position: absolute; inset: 0; background: var(--v-5); color: #fff; }
.clip__bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #7a3a52 0 30%, transparent 31%); }
.clip__wave { position: absolute; left: 20%; right: 20%; top: 30%; height: 70px; display: flex; gap: 4px; align-items: center; }
.clip__wave i { flex: 1; height: var(--h); border-radius: 3px; background: var(--v-2); animation: v-wave 1.2s ease-in-out infinite alternate; }
.clip__wave i:nth-child(odd) { animation-delay: -.6s; }
@keyframes v-wave { to { height: calc(var(--h) * .45); } }
.clip__sub { position: absolute; left: 12px; right: 12px; top: 58%; text-align: center; font-weight: 800; font-size: 17px; line-height: 1.3; font-family: var(--v-ui); }
.clip__sub span { background: #fff; color: #111; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.clip__sub span:nth-child(2) { background: var(--v-2); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checks li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .6rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--c-line); font-size: var(--t-md); }
.checks span { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--v-2); }
.incl--3 { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .incl--3 { grid-template-columns: repeat(3, 1fr); } }
.incl--3 .incl__item p:first-child { font-size: 1.4rem; }
.q__vis--clips { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; margin: .4rem 0 1rem; }
.q__clip { aspect-ratio: 9 / 16; border-radius: 2px; border: 1px dashed rgba(31,22,20,.18); }
.q__clip.is-on { border: 0; background: var(--accent); }
.plan2--featured .q__clip { border-color: rgba(247,241,234,.2); }
.plan2--featured .q__clip.is-on { background: var(--v-2); }

/* Packs */
.packs { display: grid; gap: 1.2rem; text-align: left; }
@media (min-width: 60rem) { .packs { grid-template-columns: repeat(3, 1fr); } }
.pack { position: relative; border-radius: var(--v-radius); background: #fff; padding: 2rem 1.8rem; display: grid; gap: 1rem; box-shadow: var(--v-shadow-soft); align-content: start; }
.pack--featured { background: var(--v-night); color: #f7f1ea; }
.pack__combo { margin: 0; opacity: .75; }
.pack__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 0; border-top: 1px solid rgba(31,22,20,.1); }
.pack--featured .pack__row { border-color: rgba(247,241,234,.16); }
.pack__row > span { font-size: var(--t-sm); opacity: .7; }
.pack__row s { opacity: .45; margin-right: .6rem; font-size: .95rem; }
.pack__row b { font-family: var(--f-display); font-weight: 500; font-size: 1.8rem; }
.pack__row small { opacity: .6; margin-left: .3rem; }
.pack__save { margin: 0; font-weight: 600; color: var(--accent); }
.pack--featured .pack__save { color: var(--v-2); }
.pack--featured .plan2__cta { background: var(--v-2); color: var(--v-night); }

/* Tarifs : navigation par ancres */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; }
.tabs a { padding: .55rem 1rem; border-radius: 999px; background: #fff; color: var(--c-ink); text-decoration: none; font-size: var(--t-sm); box-shadow: var(--v-shadow-soft); }
.tabs a:hover { background: var(--accent); color: #fff; }

/* Métiers : mosaïque du hero */
.mosaic { display: grid; grid-template-columns: repeat(8, 1fr); gap: .6rem; width: min(100% - 2 * var(--gutter), 76rem); margin: 3rem auto 0; padding-bottom: 3rem; }
@media (max-width: 48rem) { .mosaic { grid-template-columns: repeat(4, 1fr); } .mosaic__i:nth-child(n+9) { display: none; } }
.mosaic__i { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--bg-t); animation: v-rise .9s var(--e-out) both; animation-delay: calc(var(--i) * 60ms); }
.mosaic__i:nth-child(even) { transform: translateY(18px); }
@keyframes v-rise { from { opacity: 0; translate: 0 20px; } }

/* Réalisations */
.cases { display: grid; gap: 1.2rem; }
.case { display: grid; gap: 1.4rem; border-radius: var(--v-radius); background: var(--bg-t); color: var(--fg-t); text-decoration: none; overflow: hidden; padding: 2.2rem 2rem 0; transition: transform .6s var(--e-out); }
.case:hover { transform: translateY(-4px); color: var(--fg-t); }
.case:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
@media (min-width: 60rem) { .case { grid-template-columns: 1fr 1.1fr; align-items: end; padding: 2.6rem 2.6rem 0; } .case .case__txt { padding-bottom: 2.6rem; } }
.case h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); margin: .3rem 0 .4rem; }
.case__what { font-weight: 600; margin: 0 0 .8rem; }
.case .door2__desc { max-width: 44ch; }
.case .door2__go { color: inherit; display: inline-block; margin-top: 1rem; }
.case__vis { display: grid; justify-items: center; align-items: end; }
.browser--case { width: min(100%, 520px); margin-bottom: 0; border-radius: 14px 14px 0 0; }
.browser--case .browser__hero { height: 200px; }
.browser--case .browser__rows { padding-bottom: 18px; }

/* Journal */
.bcards { display: grid; gap: 1.2rem; }
@media (min-width: 48rem) { .bcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .bcards { grid-template-columns: repeat(3, 1fr); } }
.bcard { display: grid; grid-template-rows: auto 1fr; border-radius: var(--v-radius); overflow: hidden; background: #fff; color: var(--c-ink); text-decoration: none; box-shadow: var(--v-shadow-soft); transition: transform .5s var(--e-out); }
.bcard:hover { transform: translateY(-4px); color: var(--c-ink); }
.bcard:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.bcard__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bcard__art { position: absolute; right: -8%; top: 0; width: 60%; height: 100%; }
.bcard__k { position: absolute; left: 1.2rem; bottom: 1rem; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.bcard__txt { padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: .6rem; align-content: start; }
.bcard h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.bcard p { margin: 0; font-size: var(--t-sm); color: var(--c-ink-2); line-height: 1.55; }

/* Contact */
.contact2 { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 60rem) { .contact2 { grid-template-columns: 1fr 1.6fr; } }
.contact2__aside { display: grid; gap: 1rem; }
.contact2__form { background: #fff; border-radius: var(--v-radius); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--v-shadow-soft); }

/* Carte de l'agence et pages de contenu */
.v-page .v-map { background: var(--v-night); }
.v-page > main > article, .v-page .article { background: transparent; }
.ig__link { color: #1d4fb8; }

/* Couvertures des études de cas et des articles */
.acover { position: relative; margin: 2rem 0 3rem; border-radius: var(--v-radius); background: var(--bg-t); color: var(--fg-t, #fff); overflow: hidden; padding: 2rem 2rem 0; display: grid; gap: 1.4rem; align-items: end; min-height: 20rem; }
@media (min-width: 60rem) { .acover { grid-template-columns: 1fr 1.4fr; padding: 2.6rem 2.6rem 0; } }
.acover__txt { align-self: start; }
.acover__t { font-family: var(--f-display); font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; margin: .4rem 0 0; }
.acover .browser--case { justify-self: center; }
.acover__ph { position: absolute; right: 3%; bottom: -60px; --w: 150px; }
@media (max-width: 60rem) { .acover__ph { display: none; } }
.acover--blog { grid-template-columns: repeat(3, 1fr); padding: 1.6rem; gap: 1rem; min-height: 0; align-items: stretch; }
.acover__card { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: var(--v-shadow-soft); transform: rotate(-2deg); }
.acover__card:nth-child(2) { transform: translateY(-10px) rotate(1.5deg); }
.acover__card:nth-child(3) { transform: rotate(-1deg); }

/* ==========================================================================
   v2.3 : contact, ticker coloré, tuile pleine largeur, icônes métier
   ========================================================================== */
.tile--wide { grid-column: 1 / -1; }
@media (min-width: 60rem) { .tile--wide { grid-template-columns: 1.3fr 1fr; align-items: center; } .tile--wide .tile__vis { justify-items: end; } }

.ticker__track { gap: .7rem; }
.tick { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem .5rem .5rem; font-size: var(--t-sm); box-shadow: 0 1px 0 rgba(31,22,20,.06); }
.tick__ic { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: #fff; transition: transform .4s var(--ease-overshoot, ease); }
.tick:hover .tick__ic { transform: rotate(-12deg) scale(1.1); }
.ticker + .ticker { margin-top: .7rem; }

.v-pill__dot--icon { width: 1.9rem; height: 1.9rem; background: var(--accent); color: #fff; }
.v-pill__dot--icon::after { display: none; }
.v-pill__dot--icon:empty { width: 1.4rem; height: 1.4rem; background: var(--v-1); }
.v-pill__dot--icon:empty::after { display: block; }

.ttile__txt { position: relative; }
.ttile__ic { position: absolute; right: .8rem; top: -1.3rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.ttile--sm .ttile__ic { width: 2rem; height: 2rem; top: -1rem; }

/* Contact */
.chero { padding-top: clamp(6.5rem, 11vh, 8rem); background: var(--v-light); }
.chero__grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 62rem) { .chero__grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } .chero__form { position: sticky; top: 6.5rem; } }
.chero .crumbs { margin-bottom: 1rem; }
.chero .v-pill { margin: 0 0 1.4rem; }
.chero__title { margin: 0 0 1.3rem; text-align: left; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); max-width: 12ch; }
.chero .v-lead { max-width: 34rem; }
.chero__form { background: #fff; border-radius: var(--v-radius); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--v-shadow); }
.chero__k { margin: 0 0 1rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.chero__form .form { max-width: none; }
.cways { display: grid; gap: .7rem; margin-top: 2rem; max-width: 30rem; }
.cway { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: 16px; background: #fff; text-decoration: none; color: var(--c-ink); box-shadow: var(--v-shadow-soft); transition: transform .4s var(--e-out); }
a.cway:hover { transform: translateX(4px); color: var(--c-ink); }
.cway__ic { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.cway small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.cway b { font-weight: 600; }
.ccall { width: min(100%, 260px); background: #1f1614; color: #fff; border-radius: 22px; padding: 1.4rem 1rem; display: grid; justify-items: center; gap: .3rem; font-family: var(--v-ui); }
.ccall__av { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.4rem; margin-bottom: .3rem; animation: v-ring 1.6s ease-in-out infinite; }
@keyframes v-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,184,106,.5); } 50% { box-shadow: 0 0 0 12px rgba(232,184,106,0); } }
.ccall small { opacity: .6; }
.ccall__btns { display: flex; gap: 2.4rem; margin-top: .8rem; }
.ccall__btns i { width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.cband { display: grid; gap: 1.6rem; }
@media (min-width: 56rem) { .cband { grid-template-columns: repeat(3, 1fr); } }
.cband p { margin: 0; opacity: .8; }
.cband a { color: var(--v-2); }
.chero__form .form { border: 0; padding: 0; background: none; box-shadow: none; max-width: none; }

/* ==========================================================================
   v2.4 : accueil, titre animé, réseaux sociaux flottants, métiers en couleur
   ========================================================================== */
/* Métiers défilants : boutons rectangulaires à la couleur du métier */
.tick { border-radius: 10px; background: var(--ac); color: #fff; padding: .7rem 1.1rem .7rem .75rem; font-weight: 600; box-shadow: 0 8px 18px -12px var(--ac); }
.tick:hover, .tick:focus-visible { color: #fff; transform: translateY(-3px); filter: brightness(1.08); }
.tick__ic { width: 1.9rem; height: 1.9rem; border-radius: 7px; background: rgba(255,255,255,.18); color: #fff; }

/* Titre : le lieu change en boucle */
.rot { display: inline-block; position: relative; }
.rot__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rot__box { position: relative; display: inline-block; height: 1.12em; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; }
.rot__track { display: flex; flex-direction: column; align-items: center; animation: v-rot 14s cubic-bezier(.7, 0, .2, 1) infinite; }
.rot__track > span { display: block; height: 1.12em; line-height: 1.12; white-space: nowrap; font-style: italic; }
@keyframes v-rot {
  0%, 12% { transform: translateY(0); }
  16.6%, 28.6% { transform: translateY(-1.12em); }
  33.3%, 45.3% { transform: translateY(-2.24em); }
  50%, 62% { transform: translateY(-3.36em); }
  66.6%, 78.6% { transform: translateY(-4.48em); }
  83.3%, 96% { transform: translateY(-5.6em); }
  100% { transform: translateY(-6.72em); }
}
.rot__line { position: absolute; left: 4%; right: 4%; bottom: -.02em; width: 92%; height: .2em; overflow: visible; }
.rot__line path { fill: none; stroke: var(--v-2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: v-draw 2.33s ease-in-out infinite; }
@keyframes v-draw { 0%, 15% { stroke-dashoffset: 320; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } }

/* Hero : éléments de réseaux sociaux flottants */
.v-hero--home { position: relative; }
.v-hero--home > .v-wrap { position: relative; z-index: 2; }
.sfloat { position: absolute; inset: 0 0 auto 0; height: min(100vh, 900px); z-index: 1; pointer-events: none; }
.sf { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(40,22,14,.35); font-family: var(--v-ui); font-size: .82rem; color: #1f1614;
  opacity: 0; animation: v-sfin .9s var(--e-out) forwards, v-sfloat 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 90ms + 300ms), calc(var(--i) * -.8s); }
.sf i { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sf b { font-weight: 700; }
.sf em { position: absolute; top: -.2rem; right: -.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #ff3d5a; color: #fff; font-style: normal; font-size: .65rem; display: grid; place-items: center; font-weight: 700; }
.sf--tag { padding: .45rem .8rem; color: #1a73e8; }
.sf--stars { padding: .55rem .9rem; }
.sf__stars { color: #f2a43a; letter-spacing: 1px; }
.sf--sm { transform: scale(.88); opacity: .9; }
.sf--xs { padding: .35rem; filter: blur(1px); }
.sf--xs i { width: 1.5rem; height: 1.5rem; }
.sf--lg { font-size: .95rem; }
.sf--heart i svg { animation: v-beat 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes v-sfin { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes v-sfloat { from { transform: translateY(-8px) rotate(-2deg); } to { transform: translateY(10px) rotate(2deg); } }
@keyframes v-beat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } }
@media (max-width: 60rem) { .sf--xs, .sf--pin, .sf--bell, .sf--tag, .sf--bubble { display: none; } .sf { font-size: .72rem; } }
@media (max-width: 40rem) { .sfloat { display: none; } }
@media (prefers-reduced-motion: reduce) { .rot__track { animation: none; } .rot__line path { animation: none; stroke-dashoffset: 0; } .sf { opacity: 1; animation: none; } }
.rot__line { left: 22%; width: 56%; }

/* ==========================================================================
   v2.5 : réalisations avec les vraies captures des sites clients
   ========================================================================== */
.browser--shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.case .browser--shot { width: min(100%, 560px); }
.case__plain { width: min(100%, 520px); aspect-ratio: 16 / 10; border-radius: 14px 14px 0 0; display: grid; place-items: center; font-family: var(--f-display); font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.acover--shot { padding-bottom: 0; }
.acover--shot .browser--shot { width: min(100%, 640px); justify-self: center; margin-bottom: 0; border-radius: 14px 14px 0 0; }
.acover__link { display: inline-block; margin-top: 1rem; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.acover__what { margin: .6rem 0 0; opacity: .85; }
.phone__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.acover .acover__ph { bottom: -40px; --w: 170px; }
.gal { margin: 4rem 0 3rem; }
.gal__t { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin: .4rem 0 1.6rem; }
.gal__grid { display: grid; gap: 1.2rem; }
@media (min-width: 60rem) { .gal__grid { grid-template-columns: 1fr 1fr; } .gal__i:first-child { grid-column: 1 / -1; } }
.gal__i { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--v-shadow-soft); }
.gal__i img { display: block; width: 100%; height: auto; }
.gal__i figcaption { padding: .8rem 1rem; font-size: var(--t-sm); color: var(--c-ink-2); border-top: 1px solid rgba(31,22,20,.08); }
.gal__note { margin-top: 1rem; font-size: var(--t-xs); color: var(--c-ink-3); }

/* ==========================================================================
   v2.6 : logos clients, corps de texte centré, journal
   ========================================================================== */
.clogo { display: inline-flex; align-items: center; height: 3.2rem; margin-bottom: 1.4rem; }
.clogo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }
.clogo--chip { padding: .55rem .9rem; border-radius: 12px; height: 3.4rem; }
.acover__txt .clogo { margin-bottom: 1.2rem; }

/* Études de cas et articles : un vrai corps de texte, centré */
.v-page .article__head, .v-page .article__body, .v-page .related, .v-page .fiche { max-width: 46rem; margin-inline: auto; }
.v-page .article__body > * { max-width: none; }
.v-page .article__body { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); }
.v-page .article__body h2 { margin-top: 2.6rem; }
.v-page .acover, .v-page .gal { max-width: 76rem; margin-inline: auto; }

/* Journal : en-tête compact, articles visibles dès l'ouverture */
.v-hero--compact { padding-bottom: 2.5rem; }
.v-hero--compact .v-hero__title { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.8rem); }
.clogo img { background: none !important; }
.v-hero--compact { padding-top: clamp(5.5rem, 9vh, 7rem); padding-bottom: 0; }
.v-hero--compact .v-lead { margin-bottom: 0; }
.v-hero--compact + .v-sec { padding-top: 2.5rem; }
/* v2.7 : étiquette des cartes du journal contenue dans la moitié colorée */
.bcard__k { max-width: calc(48% - 1.4rem); line-height: 1.55; z-index: 2; }