/* ViteSite 2.1.0 — douceur, lisibilité, calage et grilles */
:root {
  --vs-ink: #3b3040;
  --vs-ink-2: #5b4a5f;
  --vs-violet: #79647d;
  --vs-lilac: #c8b6c9;
  --vs-champagne: #c6a875;
  --vs-coral: #bc7867;
  --vs-sage: #859587;
  --vs-sage-soft: #e7ece6;
  --vs-blush: #eadbd7;
  --vs-cream: #fbf8f3;
  --vs-paper: #fffdf9;
  --vs-mist: #f2edeb;
  --vs-line: #ded4d2;
  --vs-text: #342f36;
  --vs-muted: #6b646d;
  --vs-shadow: 0 24px 64px rgba(67, 49, 65, .11);
}

html {
  scroll-padding-top: 124px;
}

[id] {
  scroll-margin-top: 124px;
}

body {
  background: var(--vs-cream);
  color: var(--vs-text);
}

body::before {
  background:
    radial-gradient(circle at 92% 4%, rgba(133, 149, 135, .17), transparent 30rem),
    radial-gradient(circle at 4% 46%, rgba(234, 219, 215, .48), transparent 29rem),
    linear-gradient(180deg, rgba(255, 253, 249, .55), rgba(251, 248, 243, .15));
}

/* La règle 2.0 bloquait tout le défilement vertical de l'accueil. */
.vsHome {
  overflow-x: clip;
  overflow-y: visible;
  background: var(--vs-cream);
}

.topbar.v12Topbar {
  background: #3b3040;
}

.topbar.v12Topbar b {
  color: #efd9b2;
}

.header.premiumHeader.v12Header {
  border-bottom-color: rgba(72, 54, 70, .1);
  background: rgba(251, 248, 243, .94);
  box-shadow: 0 12px 32px rgba(67, 49, 65, .055);
}

.v12DesktopNav a::after {
  background: var(--vs-coral);
}

.button,
.button.compact,
.button.large,
button.primary {
  background: linear-gradient(135deg, #554459, #816a82);
  box-shadow: 0 11px 26px rgba(85, 68, 89, .2);
}

.button:hover,
.button:focus-visible,
button.primary:hover,
button.primary:focus-visible {
  box-shadow: 0 15px 32px rgba(85, 68, 89, .26);
}

.button.ghost,
.button.glass,
.button.secondary {
  border-color: var(--vs-line);
  background: rgba(255, 253, 249, .86);
  color: var(--vs-ink) !important;
}

/* Accueil : formes plus légères et trois offres plus chaleureuses. */
.vsHero::before {
  border-color: rgba(133, 149, 135, .27);
}

.vsHero::after {
  background: linear-gradient(145deg, rgba(234, 219, 215, .72), rgba(231, 236, 230, .45));
}

.vsBrowser {
  border-color: rgba(91, 74, 95, .14);
  box-shadow: 0 38px 80px rgba(67, 49, 65, .15);
}

.vsBrowserTop {
  background: #f0ebe8;
}

.vsBrowserBody {
  background:
    radial-gradient(circle at 82% 20%, rgba(198, 168, 117, .25), transparent 15rem),
    linear-gradient(140deg, #3b3040 0 48%, #806b7e 48% 100%);
}

.vsPriceMedallion {
  background: #bc7867;
  box-shadow: 0 18px 38px rgba(112, 71, 68, .18);
}

.vsSectionHead h2,
.vsClosing h2,
.infoHero h1,
.contentSection > h2,
.gallery-hero h1,
.relatedPages h2 {
  text-wrap: balance;
}

.vsPlan {
  border-color: var(--vs-line);
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 16px 45px rgba(67, 49, 65, .065);
}

.vsPlan.recommended {
  border-color: #d2c3d0;
  background: linear-gradient(155deg, #59475d, #725d73);
  box-shadow: 0 26px 58px rgba(69, 51, 70, .2);
}

.vsPlanBadge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  background: var(--vs-sage-soft);
  color: #56665a;
}

.vsPlan:nth-child(1) .vsPlanBadge::before { content: "◇"; }
.vsPlan:nth-child(2) .vsPlanBadge::before { content: "✦"; }
.vsPlan:nth-child(3) .vsPlanBadge::before { content: "↗"; }

.recommended .vsPlanBadge {
  background: #efdcb7;
  color: #4c3d4f;
}

.vsHow {
  background: linear-gradient(135deg, var(--vs-sage-soft), #f5eeeb 72%);
}

.vsStep {
  border-color: rgba(91, 74, 95, .12);
  background: rgba(255, 253, 249, .82);
}

.vsStep b {
  background: #79647d;
}

.vsTrust {
  border-color: var(--vs-line);
  background: rgba(255, 253, 249, .9);
}

.vsClosingCard {
  background:
    radial-gradient(circle at 88% 18%, rgba(198, 168, 117, .24), transparent 18rem),
    linear-gradient(135deg, #4f4053, #6e596f);
}

/* Pages intérieures : marges, tailles et respiration cohérentes. */
.infoPage.wrap {
  width: min(1180px, calc(100% - 64px));
  padding-top: 42px;
}

.breadcrumbs {
  margin-bottom: 22px;
}

.infoHero.v12InfoHero {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(38px, 5.5vw, 70px);
  border-color: var(--vs-line);
  border-radius: 34px 86px 34px 34px;
  background:
    radial-gradient(circle at 92% 15%, rgba(133, 149, 135, .22), transparent 20rem),
    linear-gradient(145deg, #fffdf9, #f3ece9);
  box-shadow: 0 22px 62px rgba(67, 49, 65, .09);
}

.infoHero.v12InfoHero > div {
  max-width: 960px;
}

.infoHero h1,
.infoPage h1 {
  max-width: 960px;
  font-size: clamp(2.85rem, 5.1vw, 5rem);
  line-height: 1.01;
  overflow-wrap: normal;
}

.realisationIntro {
  max-width: 780px;
}

.contentSection {
  margin: 42px 0;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--vs-line);
  border-radius: 30px 68px 30px 30px;
  background: rgba(255, 253, 249, .82);
}

.contentSection > h2 {
  max-width: 930px;
  font-size: clamp(2.05rem, 4vw, 3.75rem);
  line-height: 1.04;
}

.contentSection > p {
  max-width: 880px;
}

.contentSection > .kicker:first-child {
  margin-top: 0;
}

.projectCard,
.demoCard,
.gallery-card {
  border-color: var(--vs-line) !important;
  box-shadow: 0 15px 38px rgba(67, 49, 65, .07) !important;
}

/* Trois cartes = trois colonnes sur grand écran, donc aucun trou. */
.demoCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.demoCard {
  min-width: 0;
  border-radius: 22px 22px 48px 22px;
}

.demoCard > span {
  min-height: 122px;
  padding: 22px;
}

.demoCard strong {
  color: var(--vs-ink);
  font-family: var(--vs-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.08;
}

/* Galerie des témoins : fin des aplats sombres et du titre illisible. */
body.gallery {
  background: var(--vs-cream);
  color: var(--vs-text);
}

.gallery-hero {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 64px));
  max-width: none;
  margin: 42px auto 30px;
  padding: clamp(42px, 6vw, 76px);
  border: 1px solid var(--vs-line);
  border-radius: 34px 92px 34px 34px;
  background:
    radial-gradient(circle at 12% 16%, rgba(133, 149, 135, .24), transparent 22rem),
    radial-gradient(circle at 86% 30%, rgba(234, 219, 215, .72), transparent 25rem),
    #fffdf9;
  box-shadow: 0 22px 62px rgba(67, 49, 65, .09);
  color: var(--vs-text);
  text-align: left;
}

.gallery-hero h1 {
  max-width: 930px;
  margin: 8px 0 20px;
  color: var(--vs-ink);
  font-size: clamp(3rem, 5.2vw, 5.3rem);
  line-height: 1;
}

.gallery-hero p {
  max-width: 830px;
  margin-inline: 0;
  color: var(--vs-muted);
}

.gallery-grid {
  width: min(1180px, calc(100% - 64px));
}

.gallery-card .tag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--vs-sage-soft);
  color: #56665a;
}

.gallery-card .tag::before {
  content: "•";
  color: var(--vs-coral);
}

/* Blocs de poursuite : clairs, contrastés et moins stricts. */
.relatedPages,
.educationalDiagram {
  border: 1px solid var(--vs-line);
  background:
    radial-gradient(circle at 90% 10%, rgba(198, 168, 117, .18), transparent 17rem),
    linear-gradient(135deg, var(--vs-sage-soft), #f5ece9);
  color: var(--vs-text);
  box-shadow: 0 18px 50px rgba(67, 49, 65, .07);
}

.relatedPages {
  border-radius: 30px 72px 30px 30px;
  padding: clamp(28px, 4vw, 46px);
}

.relatedPages h2,
.educationalDiagram h2 {
  color: var(--vs-ink);
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  line-height: 1.04;
}

.relatedPages a {
  justify-content: flex-start;
  border-color: rgba(91, 74, 95, .13);
  background: rgba(255, 253, 249, .85);
  color: var(--vs-ink);
  box-shadow: 0 10px 24px rgba(67, 49, 65, .055);
}

.relatedPages a::before {
  content: "↗";
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--vs-blush);
  color: var(--vs-ink);
  font-family: var(--vs-serif);
}

.relatedPages a:hover {
  background: #fffdf9;
  transform: translateY(-2px);
}

.educationalDiagram p,
.educationalDiagram li {
  color: var(--vs-muted) !important;
}

.v12Footer {
  background: #3b3040 !important;
}

@media (max-width: 980px) {
  .demoCards {
    grid-template-columns: 1fr;
  }

  .demoCard > span {
    min-height: 0;
  }
}

@media (max-width: 780px) {
  html {
    scroll-padding-top: 92px;
  }

  [id] {
    scroll-margin-top: 92px;
  }

  .wrap,
  .infoPage.wrap,
  .gallery-grid,
  .gallery-hero {
    width: min(100% - 32px, 1180px);
  }

  .infoPage.wrap {
    padding-top: 22px;
  }

  .breadcrumbs {
    margin-bottom: 16px;
  }

  .infoHero.v12InfoHero,
  .gallery-hero {
    margin-top: 22px;
    padding: 28px 22px 32px;
    border-radius: 26px 52px 26px 26px;
  }

  .infoHero h1,
  .infoPage h1,
  .gallery-hero h1 {
    font-size: clamp(2.55rem, 12vw, 4.15rem);
    line-height: 1.01;
    letter-spacing: -.045em;
  }

  .contentSection {
    padding: 24px 20px;
    border-radius: 24px 46px 24px 24px;
  }

  .contentSection > h2 {
    font-size: clamp(2rem, 9.5vw, 3.25rem);
  }

  .relatedPages {
    margin: 48px 0;
    padding: 25px 20px;
    border-radius: 24px 46px 24px 24px;
  }

  .relatedPages h2,
  .educationalDiagram h2 {
    font-size: clamp(2rem, 9.5vw, 3.15rem);
  }

  .vsHero h1 {
    font-size: clamp(3rem, 14vw, 4.85rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}