/*
 * SYB Software — Technologie calme, integration v1 (23 October 2026)
 * Additive design layer, deliberately scoped to the company site.
 * Existing content, business terms, forms, consent scripts and ERP demo remain unchanged.
 * Only use in a review branch until cross-browser QA and publication approval.
 */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #fbfbfd;
  --surface: rgba(255,255,255,.94);
  --surface-solid: #ffffff;
  --surface-muted: #f4f5f9;
  --text: #12141e;
  --muted: #667080;
  --muted-2: #667080;
  --primary: #171925;
  --primary-2: #242736;
  --accent: #6654f6;
  --accent-soft: #f0eeff;
  --accent-ink: #4e3bdb;
  --accent-ink-strong: #3525a6;
  --accent-rgb: 102,84,246;
  --border: rgba(20,23,37,.095);
  --border-strong: rgba(20,23,37,.18);
  --shadow-xs: 0 5px 20px rgba(30,30,65,.025);
  --shadow-sm: 0 17px 48px rgba(30,30,65,.065);
  --shadow-md: 0 32px 70px rgba(30,30,65,.10);
  --radius-sm: 13px;
  --radius: 22px;
  --radius-lg: 30px;
  --page-gutter: clamp(20px, 4.4vw, 64px);
  --container: 1280px;
}
html { scroll-padding-top: 92px; }
body {
  background: #fff;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none; }
::selection { color: #201b3c; background: #e9e5ff; }
:focus-visible { outline: 3px solid #998dff; outline-offset: 4px; }
.container { max-width: var(--container); }
.home-wide-page { --container: 1340px; }
/* Quiet, predictable navigation. Real logo and JS-driven menu are retained. */
.site-header,
.site-header.is-scrolled,
.site-header:focus-within {
  background: rgba(255,255,255,.91);
  border-bottom: 1px solid rgba(20,23,37,.07);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.navbar { min-height: 76px; }
.brand { color: var(--text); font-weight: 780; letter-spacing: -.04em; }
.nav-links { gap: 2px; font-size: .82rem; font-weight: 650; }
.nav-links > a:not(.btn) {
  color: #555d6c;
  padding: 10px 11px;
  transition: color .18s ease, background-color .18s ease;
}
.nav-links > a:not(.btn):hover,
.nav-links > a:not(.btn).active,
.nav-links > a:not(.btn)[aria-current="page"] {
  background: #f5f5fa;
  color: var(--text);
  transform: none;
}
.mobile-toggle { border-radius: 12px; background: #fff; font-weight: 700; }
/* Material hierarchy without visual noise. */
h1,h2,h3 { color: inherit; letter-spacing: -.052em; text-wrap: balance; }
h1 { font-weight: 760; line-height: 1.04; }
h2 { font-weight: 735; line-height: 1.09; }
h3 { font-weight: 690; line-height: 1.14; }
p { text-wrap: pretty; }
.eyebrow, .tag.accent {
  color: var(--accent-ink-strong);
  background: #f1eeff;
  border-color: transparent;
  box-shadow: none;
  font-weight: 740;
  letter-spacing: .065em;
}
.eyebrow::before { box-shadow: none; background: var(--accent); }
.btn {
  min-height: 48px;
  padding: 12px 21px;
  font-size: .865rem;
  font-weight: 735;
  letter-spacing: -.012em;
  box-shadow: none;
}
.btn-primary {
  color: #fff;
  background: #6654f6;
  border-color: #6654f6;
  box-shadow: 0 10px 26px rgba(87,69,225,.15);
}
.btn-primary:hover, .btn-primary:focus-visible {
  color: #fff;
  background: #5240e4;
  border-color: #5240e4;
  box-shadow: 0 14px 30px rgba(87,69,225,.2);
}
.btn-secondary {
  color: var(--text);
  background: #fff;
  border: 1px solid #e2e3eb;
  box-shadow: none;
}
.btn-secondary:hover { border-color: #bcb8e8; background: #fafaff; }
/* Homepage: generous text area and a real, labeled ERP preview. */
.premium-hero {
  padding: clamp(70px, 8vw, 124px) 0 clamp(76px, 8vw, 120px);
  background: radial-gradient(ellipse at 80% 46%, rgba(227,221,255,.34), transparent 45%), #fff;
}
.premium-hero::before, .premium-hero::after { display: none; }
.premium-hero-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  gap: clamp(40px, 5vw, 86px);
}
.premium-hero h1 {
  margin-top: 25px;
  max-width: 13.5ch;
  font-size: clamp(3rem, 5.4vw, 5.8rem);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -.06em;
}
.premium-lead { max-width: 39rem; color: #626b79; line-height: 1.73; font-size: clamp(1.04rem, 1.28vw, 1.22rem); }
.premium-proof { gap: 10px; }
.premium-proof span {
  background: #f6f7fa;
  border: 1px solid #eceef3;
  border-radius: 999px;
  color: #6a7180;
  font-weight: 650;
}
.premium-hero-visual { isolation: isolate; }
.visual-glow { opacity: .65; }
.premium-browser {
  border: 1px solid #e6e7ee;
  border-radius: 23px;
  transform: rotate(-1.4deg);
  box-shadow: 0 37px 83px rgba(28,28,67,.14);
}
.premium-browser-bar { background: #fbfbfd; border-bottom-color: #eff0f4; }
.visual-card {
  border: 1px solid #ecedf2;
  border-radius: 17px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 17px 38px rgba(20,24,53,.065);
}
/* Product categories: calm, structured cards. */
.premium-section { padding: clamp(68px, 8.2vw, 116px) 0; }
.premium-section-head { margin-bottom: clamp(28px, 3.8vw, 54px); }
.premium-section-head h2, .section-header h2 {
  font-size: clamp(2.25rem, 3.75vw, 4.25rem);
  letter-spacing: -.051em;
  max-width: 18ch;
}
.premium-section-head p, .section-header p { color: #6b7382; line-height: 1.73; }
.premium-services { background: #fafbfc; }
.premium-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.premium-service-card {
  min-height: 275px;
  border: 1px solid #e9eaf0;
  border-radius: 26px;
  background: #fff;
  padding: clamp(24px, 2.8vw, 38px);
  box-shadow: none;
}
.premium-service-card::after { opacity: .42; }
.premium-service-card:hover {
  transform: translateY(-3px);
  border-color: #d4d0f6;
  box-shadow: 0 23px 45px rgba(29,26,72,.065);
}
.premium-service-card.featured {
  background: #1b1c2a;
  border-color: #1b1c2a;
  color: #fff;
}
.premium-service-card.featured h3, .premium-service-card.featured p { color: #fff; }
.premium-service-card.featured p { color: #c6c6d4; }
.premium-service-card.featured a { color: #c7bfff; }
.premium-service-card.featured .service-index { color: #b2a8ff; }
.premium-service-card.featured::after { background: rgba(147,126,255,.17); }
.premium-service-card h3 { font-size: clamp(1.45rem, 2vw, 1.95rem); }
.premium-service-card p { color: #646c79; line-height: 1.7; }
.premium-service-card a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.premium-problems { background: #fff; }
.problem-cards article, .trust-grid article, .decision-grid > article,
.premium-method-steps article, .direct-cta-card {
  border-color: #eaebf1;
  border-radius: 22px;
  box-shadow: none;
}
.problem-cards article { background: #fafbfc; }
/* The underlying layout uses white text for its original dark panel.
   This light variant explicitly resets every inherited foreground/background,
   so the section stays readable on desktop, mobile and keyboard navigation. */
.premium-method-panel {
  border-radius: 32px;
  border: 1px solid #e4e6ef;
  color: #12141e;
  background: #f7f8fb;
  box-shadow: none;
}
.premium-method-panel > h2,
.premium-method-steps strong { color: #12141e; }
.premium-method-panel > .tag.accent {
  color: #3525a6;
  background: #eeeaff;
}
.premium-method-steps article {
  color: #12141e;
  background: #fff;
  border-color: #e2e4ed;
}
.premium-method-steps span { color: #4e3bdb; }
.premium-method-panel p,
.premium-method-steps p { color: #4c5668; }
.trust-section { background: #fafbfc; }
.trust-grid article { background: #fff; }
.premium-erp-focus { background: #fff; }
.premium-erp-grid {
  border: 1px solid #2e2c48;
  border-radius: 32px;
  background: #1c1d2b;
  color: #fff;
  padding: clamp(34px, 5.5vw, 70px);
  box-shadow: none;
}
.premium-erp-grid h2, .premium-erp-grid .premium-erp-mini strong { color: #fff; }
.premium-erp-grid p { color: #c3c4d5; }
.premium-erp-grid .tag { color: #d1c9ff; background: #302d4f; }
.premium-erp-grid .btn-secondary { color: #1a1b28; background: #fff; }
.premium-erp-mini {
  color: #f7f7fc;
  background: #29293d;
  border-color: #403c59;
  box-shadow: none;
}
.premium-erp-mini span { color: #d5d3e7; background: #353449; border-color: #514d68; }
.premium-final-cta {
  border: 1px solid #e9e5ff;
  border-radius: 32px;
  background: linear-gradient(135deg, #f7f5ff 0%, #fcfcff 76%);
  box-shadow: none;
}
/* Existing commercial subpages keep their complete terms and CTAs. */
.subpage-hero {
  background: radial-gradient(ellipse at 80% 35%, rgba(235,230,255,.38), transparent 42%), #fff;
  padding-top: clamp(62px, 6vw, 94px);
  padding-bottom: clamp(62px, 7vw, 100px);
}
.subpage-hero-copy h1 {
  max-width: 16ch;
  font-size: clamp(2.75rem, 4.65vw, 5.25rem);
  font-weight: 760;
  line-height: 1.065;
  letter-spacing: -.057em;
}
.subpage-hero-copy .lead { color: #68717e; line-height: 1.72; }
.subpage-hero-panel {
  border: 1px solid #ececf4;
  border-radius: 27px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 26px 60px rgba(31,29,71,.075);
}
.breadcrumbs { color: #626b79; }
.editorial-section, .section { background-color: transparent; }
.clean-panel, .panel.clean-panel,
.demo-module-rail, .demo-screen-stage, .contact-simple-form {
  border-color: #e9eaf1;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(29,28,65,.04);
}
.demo-screenshot-card { border-radius: 17px; overflow: hidden; }
.demo-module-rail button:focus-visible, .demo-stage-controls button:focus-visible { outline: 3px solid #998dff; outline-offset: 2px; }
.contact-simple-form input,
.contact-simple-form select,
.contact-simple-form textarea {
  background: #fff;
  border: 1px solid #dfe2e9;
  border-radius: 13px;
  color: var(--text);
}
.contact-simple-form input:focus,
.contact-simple-form select:focus,
.contact-simple-form textarea:focus {
  outline: 2px solid #958aff;
  outline-offset: 1px;
  border-color: #958aff;
}
.direct-cta-card { background: #fafbfc; }
/* Keyboard users must never lose their focus indicator on consent controls. */
.cookie-consent-button:focus-visible,
.cookie-consent-close:focus-visible,
.footer-cookie-settings:focus-visible {
  outline: 3px solid #6654f6;
  outline-offset: 4px;
}
@media (forced-colors: active) {
  .cookie-consent-button:focus-visible,
  .cookie-consent-close:focus-visible,
  .footer-cookie-settings:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 4px;
  }
}
/* Dedicated service actions: calm visual hierarchy and 44px touch targets. */
.premium-service-card {
  display: flex;
  flex-direction: column;
}
.premium-service-card > p { margin-bottom: 22px; }
.premium-service-card .service-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  margin-top: auto;
  padding: 11px 14px;
  border: 1px solid #dedbed;
  border-radius: 12px;
  background: #f8f7ff;
  color: #4632bd;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.premium-service-card .service-cta:hover {
  background: #efedff;
  border-color: #bbb2f2;
}
.premium-service-card .service-cta:focus-visible {
  outline: 3px solid #6654f6;
  outline-offset: 3px;
}
.premium-service-card .service-cta > span {
  flex-shrink: 0;
  font-size: 1.2em;
}
.premium-service-card.featured .service-cta {
  background: #f4f2ff;
  color: #3520a8;
  border-color: #f4f2ff;
}
.premium-service-card.featured .service-cta:hover {
  background: #e8e3ff;
}
@media (prefers-reduced-motion: reduce) {
  .premium-service-card .service-cta { transition: none; }
}

/* SYB ERP walkthrough: understated, accessible progression feedback. */
.demo-stage-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px clamp(18px, 3vw, 28px) 18px;
  background: #ffffff;
  color: #525a69;
  font-size: .9rem;
  font-weight: 650;
}
.demo-stage-progress progress {
  display: block;
  flex: 1 1 180px;
  max-width: 320px;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e9e7f4;
  accent-color: #6654f6;
}
.demo-stage-progress progress::-webkit-progress-bar { background: #e9e7f4; border-radius: 999px; }
.demo-stage-progress progress::-webkit-progress-value { background: #6654f6; border-radius: 999px; }
.demo-stage-progress progress::-moz-progress-bar { background: #6654f6; border-radius: 999px; }
@media (max-width: 520px) {
  .demo-stage-progress { align-items: stretch; flex-direction: column; gap: 10px; }
  .demo-stage-progress progress { flex: 0 0 9px; width: 100%; max-width: none; }
}

/* Context-aware contact form hint: unobtrusive and keyboard/screen-reader friendly. */
.contact-simple-form .project-guidance {
  margin: -5px 0 2px;
  padding: 10px 13px;
  border-radius: 12px;
  color: #4c5668;
  background: #f5f5fb;
  font-weight: 500;
  line-height: 1.55;
}
/* Keep the empty live region in the accessibility tree without occupying space. */
.contact-simple-form .project-guidance:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Legal content, existing consent controls and low-end devices stay readable. */
.clean-hero { background: linear-gradient(135deg,#fff,#f9f9fc); }
.legal-note { line-height: 1.75; }
.site-footer { background: #fff; border-top-color: #ececf2; padding-block: 42px; }
.footer-links { font-size: .82rem; font-weight: 650; }
.footer-links a:hover, .footer-cookie-settings:hover { color: var(--accent-ink); }
.cookie-consent { border-color: #e2e3eb; box-shadow: 0 22px 62px rgba(18,18,44,.16); }
.cookie-consent-button:hover, .cookie-consent-button:focus-visible { background: #171925; color: #fff; }
@media (min-width: 1181px) {
  .premium-section-head:not(.compact) h2 { max-width: 18ch; }
}
@media (max-width: 1180px) {
  .premium-hero-grid, .subpage-hero-grid { grid-template-columns: 1fr; }
  .premium-hero h1 { max-width: 15ch; }
  .premium-hero { padding-block: 78px 90px; }
  .premium-hero-visual { max-width: 820px; width: 100%; margin-inline: auto; }
}
@media (max-width: 760px) {
  .navbar { min-height: 68px; }
  .premium-hero, .subpage-hero { padding-block: 58px 65px; }
  .premium-hero h1 { font-size: clamp(2.6rem, 9.3vw, 4rem); max-width: none; letter-spacing: -.054em; }
  .subpage-hero-copy h1 { font-size: clamp(2.55rem, 9vw, 4rem); max-width: none; }
  .premium-hero-grid { gap: 28px; }
  .premium-service-grid { grid-template-columns: 1fr; }
  .premium-service-card { min-height: 0; padding: 26px; }
  .premium-section { padding-block: 58px; }
  .premium-erp-grid, .premium-final-cta { padding: 29px 24px; border-radius: 25px; }
  .premium-section-head h2 { font-size: clamp(2.15rem, 8vw, 3.1rem); }
  .premium-proof { gap: 7px; }
  .premium-proof span { font-size: .7rem; }
  .btn { max-width: 100%; white-space: normal; }
}
/* Keep the real navigation usable on short mobile / landscape viewports. */
@media (max-width: 1080px) {
  .js .nav-links {
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border-color: #e9eaf1;
    box-shadow: 0 20px 48px rgba(29, 28, 65, .11);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-links > a, .premium-service-card { transition: none; }
  .btn:hover, .premium-service-card:hover { transform: none; }
}

/* SYB Software — finitions de lisibilite et cadrage des heros (revue 10/11/2026).
 * Modifications additives sur la seule feuille de design, sans changer le
 * contenu commercial, le formulaire de contact, les scripts ou la charte.
 */
:root {
  --muted: #4c5564;
  --muted-2: #586171;
}
body { font-weight: 500; letter-spacing: -.004em; }
p, li { font-weight: 500; }
.nav-links { font-size: .87rem; font-weight: 720; }
.nav-links > a:not(.btn) { color: #3e4655; }
.premium-lead, .subpage-hero-copy .lead {
  color: #4c5564;
  font-weight: 500;
  line-height: 1.62;
}
.premium-section-head p, .section-header p,
.premium-service-card p, .problem-cards p,
.trust-grid p, .premium-method-panel p,
.subpage-hero-panel p, .erp-hero-caption p {
  color: #505969;
  font-weight: 500;
}
.premium-service-card.featured p { color: #dedee9; }
.premium-proof span { color: #485162; font-weight: 700; }
.breadcrumbs { color: #515a6a; font-weight: 650; }

/* Accueil : ramener le message et l'ERP dans un meme champ visuel. */
@media (min-width: 1181px) {
  .premium-hero { padding-top: clamp(48px, 4.5vw, 76px); padding-bottom: clamp(55px, 5.5vw, 88px); }
  .premium-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(38px, 4.4vw, 68px);
    align-items: center;
  }
  .premium-hero h1 {
    max-width: 16.2ch;
    font-size: clamp(3.35rem, 4.15vw, 4.65rem);
    line-height: 1.065;
    letter-spacing: -.052em;
    margin-top: 21px;
  }
  .premium-lead { margin-top: 22px; max-width: 38rem; font-size: clamp(1.06rem, 1.16vw, 1.17rem); }
  .premium-actions { margin-top: 25px; }
  .premium-proof { margin-top: 20px; }
  .premium-hero-visual { min-height: 520px; }
  .premium-browser { top: 13%; }
  .visual-card-top { top: 0; }
  .visual-card-bottom { bottom: 1%; }
}

/* ERP : titre plus contenu, aperçu produit mieux équilibre. */
@media (min-width: 1181px) {
  .erp-hero { padding-top: 54px; padding-bottom: 54px; }
  .erp-hero .subpage-hero-grid {
    grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
    gap: clamp(32px, 4.1vw, 60px);
    align-items: center;
  }
  .erp-hero .subpage-hero-copy h1 {
    max-width: 16.4ch;
    font-size: clamp(3.25rem, 4.05vw, 4.65rem);
    line-height: 1.07;
    letter-spacing: -.052em;
  }
  .erp-hero .subpage-hero-copy .lead { max-width: 39rem; }
  .erp-hero .subpage-hero-panel { align-self: center; }
}

/* Contact : alignement du message avec l'adresse, moins de vide avant le formulaire. */
@media (min-width: 1181px) {
  .contact-hero { padding-top: 51px; padding-bottom: 35px; }
  .contact-hero .subpage-hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
    gap: clamp(36px, 4.3vw, 64px);
    align-items: center;
  }
  .contact-hero .subpage-hero-copy h1 {
    max-width: 19ch;
    font-size: clamp(3.15rem, 3.9vw, 4.45rem);
    line-height: 1.07;
    letter-spacing: -.053em;
  }
  .contact-hero .subpage-hero-copy .lead { max-width: 43rem; }
  .contact-hero .contact-email-block { width: 100%; max-width: 430px; justify-self: end; }
  #formulaire-contact { padding-top: 35px; }
}
/* Conserver la lisibilite sans augmenter la hauteur des heros sur petit ecran. */
@media (max-width: 1180px) {
  .premium-hero h1 { line-height: 1.07; }
  .erp-hero .subpage-hero-copy h1,
  .contact-hero .subpage-hero-copy h1 { line-height: 1.08; }
}
@media (max-width: 760px) {
  .premium-hero h1 { font-size: clamp(2.35rem, 8.6vw, 3.65rem); }
  .subpage-hero-copy h1 { font-size: clamp(2.35rem, 8.4vw, 3.55rem); }
  .nav-links { font-size: .94rem; }
}

/* SYB — v3: hero illustration with NO overlapping content.
 * Repair the competing absolute positions in styles.css (browser, chips and
 * two callout cards). They now participate in normal layout at EVERY width.
 * Mobile/desktop typography and commercial content remain unchanged.
 */
.premium-hero .premium-hero-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "preview"
    "features"
    "evidence";
  gap: 12px;
  min-height: 0;
  align-content: center;
  justify-items: stretch;
  isolation: isolate;
}
.premium-hero .premium-hero-visual::before,
.premium-hero .premium-hero-visual .visual-glow { display: none; }
.premium-hero .premium-hero-visual .premium-browser,
.premium-hero .premium-hero-visual .visual-card,
.premium-hero .premium-hero-visual .solution-visual-strip {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: none;
  width: auto;
  min-width: 0;
  margin: 0;
  transform: none;
  animation: none;
}
.premium-hero .premium-hero-visual .visual-card {
  padding: 14px 17px;
  box-shadow: 0 12px 30px rgba(28, 28, 67, .055);
  border-radius: 17px;
  background: #fff;
  backdrop-filter: none;
}
.premium-hero .premium-hero-visual .visual-card span {
  margin-bottom: 5px;
  padding: 5px 9px;
  font-size: .66rem;
}
.premium-hero .premium-hero-visual .visual-card strong {
  font-size: .92rem;
  line-height: 1.34;
  letter-spacing: -.02em;
}
.premium-hero .premium-hero-visual .visual-card-top {
  grid-area: intro;
  justify-self: end;
  width: min(100%, 340px);
}
.premium-hero .premium-hero-visual .premium-browser {
  grid-area: preview;
  overflow: hidden;
  border-radius: 19px;
  box-shadow: 0 22px 50px rgba(28, 28, 67, .12);
}
.premium-hero .premium-hero-visual .premium-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.premium-hero .premium-hero-visual .solution-visual-strip {
  grid-area: features;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  z-index: auto;
}
.premium-hero .premium-hero-visual .mini-visual {
  min-height: 34px;
  padding: 7px 10px;
  font-weight: 760;
  background: #f7f7fc;
  box-shadow: none;
  backdrop-filter: none;
}
.premium-hero .premium-hero-visual .visual-card-bottom {
  grid-area: evidence;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label action" "name action";
  align-items: center;
  column-gap: 12px;
  justify-self: stretch;
}
.premium-hero .premium-hero-visual .visual-card-bottom > span {
  grid-area: label;
  justify-self: start;
}
.premium-hero .premium-hero-visual .visual-card-bottom > strong {grid-area: name;}
.premium-hero .premium-hero-visual .visual-card-bottom > a {
  grid-area: action;
  align-self: center;
  margin: 0;
  font-size: .9rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .premium-hero .premium-hero-visual {gap: 11px;}
  .premium-hero .premium-hero-visual .visual-card-top {justify-self: stretch; width:auto;}
  .premium-hero .premium-hero-visual .visual-card-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "name" "action";
    row-gap: 4px;
  }
  .premium-hero .premium-hero-visual .visual-card-bottom > a {white-space: normal;}
  .premium-hero .premium-hero-visual .mini-visual {font-size: .75rem;}
}

/* SYB Software — finition de la composition, de la lisibilité et du mouvement.
   Fondement : grille sans chevauchement v3, animation perceptible mais discrète,
   titres avec une échelle unique et rythme vertical compact.
   CSS seulement : aucun changement au référencement, contenu, scripts ou envoi.
*/
:root { --muted: #414a5a; --muted-2: #4b5464; }
body { font-weight: 540; }
p, li { font-weight: 540; }
.nav-links { font-size: .9rem; font-weight: 730; }
.nav-links > a:not(.btn) { color: #343c4d; }
.breadcrumbs, .tag, .eyebrow { font-weight: 730; }
.premium-lead, .subpage-hero-copy .lead {
  color: #3d4656;
  font-weight: 555;
  line-height: 1.58;
  text-wrap: pretty;
}
.subpage-hero-panel p, .erp-hero-caption p, .premium-section-head p,
.premium-service-card p, .trust-grid p, .contact-project-grid .section-header p,
.contact-info-list li, .contact-simple-form .form-note {
  color: #465061;
  font-weight: 545;
  line-height: 1.60;
}
.contact-simple-form label { color: #1b2030; font-weight: 735; }
.contact-simple-form input, .contact-simple-form select,
.contact-simple-form textarea { font-weight: 535; color: #222737; }
.contact-simple-form input::placeholder, .contact-simple-form textarea::placeholder {
  color: #5b6474; opacity: 1;
}
.premium-service-card.featured p { color: #dedee9; }

/* A single framed product preview is more legible than scattered floating cards. */
.premium-hero .premium-hero-visual {
  min-height: 0;
  padding: clamp(15px, 1.5vw, 22px);
  gap: 12px;
  border: 1px solid #e9e8f6;
  border-radius: 27px;
  background: linear-gradient(155deg, #f6f5ff, #fbfbff 50%, #fff 100%);
  box-shadow: 0 20px 55px rgba(26,25,75,.07);
}
.premium-hero .premium-hero-visual .visual-card-top {
  justify-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 3px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.premium-hero .premium-hero-visual .visual-card-top span {
  margin: 0;
  flex: none;
}
.premium-hero .premium-hero-visual .visual-card-top strong {
  font-size: clamp(.82rem, .9vw, .94rem);
  line-height: 1.36;
  font-weight: 710;
}
.premium-hero .premium-hero-visual .premium-browser {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(28, 28, 67, .105);
}
.premium-hero .premium-hero-visual .solution-visual-strip {
  justify-content: flex-start;
  gap: 6px;
}
.premium-hero .premium-hero-visual .mini-visual {
  min-height: 30px;
  padding: 5px 9px;
  font-size: .73rem;
  line-height: 1.3;
  background: #fff;
  border: 1px solid #e9e9f3;
}
.premium-hero .premium-hero-visual .visual-card-bottom {
  padding: 13px 2px 1px;
  border: 0;
  border-top: 1px solid #e4e4f2;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  row-gap: 4px;
}
.premium-hero .premium-hero-visual .visual-card-bottom strong {
  font-size: .92rem;
  font-weight: 735;
}
.premium-hero .premium-hero-visual .visual-card-bottom > a {
  font-weight: 750;
  color: #4631c6;
}

@media (min-width: 1181px) {
  .premium-hero { padding-top: clamp(42px, 3.6vw, 62px); padding-bottom: clamp(48px, 4.4vw, 70px); }
  .premium-hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: clamp(40px, 4.5vw, 65px);
  }
  .premium-hero h1 {
    max-width: 18ch;
    font-size: clamp(3.1rem, 3.55vw, 4rem);
    line-height: 1.105;
    letter-spacing: -.046em;
    margin-top: 18px;
  }
  .premium-lead { max-width: 37rem; font-size: clamp(1.03rem, 1.12vw, 1.17rem); margin-top: 20px; }
  .premium-actions { margin-top: 23px; }
  .premium-proof { margin-top: 19px; }

  .erp-hero { padding-top: 44px; padding-bottom: 42px; }
  .erp-hero .subpage-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .97fr);
    gap: clamp(38px, 4.3vw, 66px);
    align-items: center;
  }
  .erp-hero .subpage-hero-copy h1 {
    max-width: 19.5ch;
    font-size: clamp(2.95rem, 3.5vw, 3.85rem);
    line-height: 1.095;
    letter-spacing: -.045em;
  }
  .erp-hero .subpage-hero-copy .lead { max-width: 37rem; }
  .erp-hero .subpage-hero-panel { align-self: center; }

  .contact-hero { padding-top: 39px; padding-bottom: 22px; }
  .contact-hero .subpage-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr);
    gap: clamp(38px, 4.6vw, 74px);
    align-items: center;
  }
  .contact-hero .subpage-hero-copy h1 {
    max-width: 21ch;
    font-size: clamp(2.9rem, 3.35vw, 3.75rem);
    line-height: 1.09;
    letter-spacing: -.045em;
  }
  .contact-hero .subpage-hero-copy .lead { max-width: 41rem; }
  .contact-hero .contact-email-block { width: 100%; max-width: none; justify-self: stretch; }
  #formulaire-contact { padding-top: 24px; }
  #formulaire-contact .section-header h2 {
    font-size: clamp(2.1rem, 2.55vw, 3.05rem);
    line-height: 1.13;
    letter-spacing: -.045em;
    max-width: 20ch;
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .premium-hero, .subpage-hero { padding-top: 54px; padding-bottom: 50px; }
  .premium-hero-grid, .subpage-hero-grid { gap: 35px; }
  .premium-hero h1 { font-size: clamp(2.85rem, 4.35vw, 3.45rem); max-width: 19ch; }
  .subpage-hero-copy h1 { font-size: clamp(2.85rem, 4.35vw, 3.45rem); max-width: 22ch; }
  .premium-hero .premium-hero-visual { width: 100%; max-width: 800px; }
  .erp-hero .subpage-hero-copy h1 { max-width: 22ch; }
  #formulaire-contact { padding-top: 25px; }
  #formulaire-contact .section-header h2 { font-size: clamp(2.2rem, 4.1vw, 3rem); }
}
@media (max-width: 720px) {
  .premium-hero, .subpage-hero { padding-top: 38px; padding-bottom: 45px; }
  .premium-hero h1 { max-width: 22ch; font-size: clamp(2.25rem, 8.5vw, 3.4rem); line-height: 1.12; letter-spacing: -.041em; }
  .subpage-hero-copy h1 { max-width: 23ch; font-size: clamp(2.22rem, 8.1vw, 3.4rem); line-height: 1.13; letter-spacing: -.041em; }
  .premium-hero .premium-hero-visual .visual-card-top { flex-wrap: wrap; gap: 6px 10px; }
  .premium-hero .premium-hero-visual .visual-card-bottom { grid-template-columns: 1fr; grid-template-areas: 'label' 'name' 'action'; }
  .premium-hero-grid { gap: 30px; }
  .contact-hero .subpage-hero-grid { gap: 25px; }
  #formulaire-contact .section-header h2 {font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.14;}
  #formulaire-contact { padding-top: 20px; }
}

/* Non-blocking, subtle motion. No large transforms or overlapping floaters.
   Scroll-reveal behavior elsewhere remains controlled by the existing JS.
   Respect the OS motion preference. */
@media (prefers-reduced-motion: no-preference) {
  .premium-hero-copy { animation: sybSoftEnter .66s both cubic-bezier(.18,.75,.25,1); }
  .premium-hero .premium-hero-visual { animation: sybSoftEnter .72s .10s both cubic-bezier(.18,.75,.25,1); }
  .erp-hero .subpage-hero-copy, .contact-hero .subpage-hero-copy {
    animation: sybSoftEnter .62s both cubic-bezier(.18,.75,.25,1);
  }
  .erp-hero .subpage-hero-panel, .contact-hero .contact-email-block {
    animation: sybSoftEnter .70s .08s both cubic-bezier(.18,.75,.25,1);
  }
  .premium-hero .premium-hero-visual .premium-browser {
    animation: sybPreviewFloat 1.8s .9s ease-in-out 1;
  }
  .premium-hero .premium-hero-visual .visual-card-top {
    animation: sybLabelFloat 1.8s 1.15s ease-in-out 1;
  }
  .premium-hero .premium-hero-visual .premium-browser,
  .premium-hero .premium-hero-visual .visual-card-top {
    will-change: transform;
  }
  @keyframes sybSoftEnter {
    from {opacity: 0; transform: translateY(8px);}
    to {opacity: 1; transform: translateY(0);}
  }
  @keyframes sybPreviewFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.5px); }
  }
  @keyframes sybLabelFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .premium-hero-copy, .premium-hero .premium-hero-visual,
  .erp-hero .subpage-hero-copy, .contact-hero .subpage-hero-copy,
  .erp-hero .subpage-hero-panel, .contact-hero .contact-email-block,
  .premium-hero .premium-hero-visual .premium-browser,
  .premium-hero .premium-hero-visual .visual-card-top {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* SYB — cadrage du premier écran, v5 (10/11/2026).
   Objectif : un hero desktop terminé dans le premier viewport et aucune
   amorce tronquée des sections suivantes. Pas de height fixe ni de masquage.
   Sur écrans bas/étroits, le contenu reprend naturellement sa hauteur. */
@media (min-width: 1181px) {
  .premium-hero,
  .subpage-hero {
    box-sizing: border-box;
    min-height: calc(100vh - 77px);
    min-height: calc(100svh - 77px);
    display: grid;
    align-items: center;
  }
  .subpage-hero > .container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .subpage-hero .subpage-hero-grid {
    margin-block: auto;
  }
  /* Service and About pages also get a complete first-screen composition. */
  .subpage-hero:not(.erp-hero):not(.contact-hero) { padding-block: 54px; }
  /* The next section starts below the initial viewport. Do not pull it up. */
  .contact-hero { padding-bottom: 39px; }
}
/* On shorter windows, preserve natural content height rather than clipping
   the ERP headline or forcing illegibly small type. */
@media (min-width:1181px) and (max-height:820px) {
  .premium-hero {padding-top: 24px; padding-bottom: 24px;}
  .erp-hero {padding-top: 15px; padding-bottom: 15px;}
  .erp-hero .subpage-hero-copy h1 {
    font-size: clamp(2.65rem, 3.15vw, 3.2rem);
    line-height: 1.08;
  }
  .erp-hero .subpage-hero-copy .lead {line-height:1.49;}
  .erp-hero .subpage-hero-copy .hero-note {line-height:1.42;}
}


/* 2026-11-10 / V6: Apple HIG web-applicable polish + WCAG 2.2 AA targets.
   Correct measured issues; avoid altering OVH rules, analytics or client subsites. */

/* A01: higher specificity than the ERP offer container's link color. */
.offer-inline-action a.btn.btn-primary,
.offer-inline-action a.btn.btn-primary:visited {
  color: #fff;
  background-color: #6654f6;
  border-color: #6654f6;
}
.offer-inline-action a.btn.btn-primary:hover,
.offer-inline-action a.btn.btn-primary:focus-visible {
  color: #fff;
  background-color: #4937d1;
  border-color: #4937d1;
}

/* A02: no implicit intrinsic-width columns on small screens; no hidden email. */
.contact-hero .subpage-hero-grid,
.contact-project-grid { min-width: 0; }
.contact-hero .subpage-hero-grid > *,
.contact-project-grid > *,
.contact-email-block,
.contact-simple-form,
.contact-simple-form label,
.contact-simple-form input,
.contact-simple-form select,
.contact-simple-form textarea { min-width: 0; max-width: 100%; }
.contact-email-block a[href^="mailto:"] {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}
@media (max-width: 1180px) {
  .contact-hero .subpage-hero-grid,
  .contact-project-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .contact-email-block { padding: 20px; }
  .contact-email-block a[href^="mailto:"] {
    font-size: clamp(1.15rem, 5.6vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: -.02em;
  }
  .contact-hero .hero-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* A05/A08: compact, predictable weight scale; retain a readable body at 16px. */
body, p, li { font-weight: 500; }
strong, b { font-weight: 700; }
h1,h2,h3 { font-weight: 700; letter-spacing: -.038em; }
.premium-hero h1, .subpage-hero-copy h1 {font-weight:700;letter-spacing:-.041em;}
.nav-links { font-size: .92rem; font-weight: 600; }
.nav-links > a:not(.btn) { font-weight: 600; }
.breadcrumbs, .tag, .eyebrow { font-weight: 600; }
.eyebrow, .tag.accent { font-size: .8125rem; line-height: 1.28; letter-spacing: .025em; }
.premium-proof span, .visual-card strong,
.subpage-hero-panel strong, .erp-hero-caption strong {font-weight:700;}
.premium-lead, .subpage-hero-copy .lead,
.subpage-hero-panel p, .erp-hero-caption p, .premium-section-head p,
.premium-service-card p, .trust-grid p, .contact-project-grid .section-header p,
.contact-info-list li, .contact-simple-form .form-note {font-weight:500;}
.contact-simple-form label {font-weight:600;}
.contact-simple-form input, .contact-simple-form select,
.contact-simple-form textarea {font-weight:500;}
.clean-hero {padding-block:clamp(2.8rem,5.5vw,4.5rem) clamp(2.25rem,3.7vw,3.75rem);}
.clean-hero h1 {
  font-size:clamp(2.5rem,4.0vw,3.8rem);
  max-width: 17ch;
  letter-spacing:-.035em;
  line-height:1.12;
}
.clean-hero .lead {max-width: 66ch;line-height:1.65;}

/* A06 / A09: comfortable hit areas; focus indicator remains visible. */
.brand { min-height:44px; display:inline-flex;align-items:center; }
.nav-links > a { min-height:44px;display:inline-flex;align-items:center;justify-content:center; }
.premium-hero .visual-card-bottom > a,
.hero-actions a, .offer-inline-action a, .direct-cta-card,
.cookie-consent-button, .cookie-consent-close,
.copy-email-button, .contact-simple-form button,
.mobile-toggle, .demo-stage-controls button, .demo-module-rail button {
  min-height:44px;
}
.premium-hero .visual-card-bottom > a { padding:10px 8px; }
:where(a,button,input,select,textarea):focus-visible {
  outline:3px solid #4937d1;
  outline-offset:3px;
}
/* Keep targeted content below the sticky header, including keyboard focus. */
:where(main, section, article, [id], :target) {scroll-margin-top: 100px;}

/* A07: respect small desktop windows / text zoom rather than forcing 100svh. */
@media (min-width:1181px) and (max-height:740px) {
  .premium-hero,.subpage-hero {min-height: 0;}
  .subpage-hero > .container {align-self:auto;}
  .subpage-hero .subpage-hero-grid {margin-block:0;}
}

/* A09: 200–400% zoom naturally stacks content; no line-clamped help text. */
@media (max-width:760px) {
  .premium-hero-grid,.subpage-hero-grid,.contact-project-grid {min-width:0;}
  .premium-hero-copy,.subpage-hero-copy,.premium-hero-visual {min-width:0;}
  .premium-hero .visual-card-bottom > a {min-height:44px;}
  .contact-simple-form .form-note,.privacy-note {overflow-wrap:anywhere;}
}
@media (prefers-contrast: more) {
  :root {--muted:#313745;--muted-2:#313745;--border:rgba(20,23,37,.3);}
  .btn-secondary,.contact-simple-form input,.contact-simple-form select,
  .contact-simple-form textarea {border-color:#646b7a;}
  .nav-links > a:not(.btn),.premium-lead,.subpage-hero-copy .lead {color:#252c3a;}
}
@media (forced-colors: active) {
  .btn,.nav-links > a,.contact-simple-form input,.contact-simple-form select,
  .contact-simple-form textarea {forced-color-adjust:auto;border:1px solid ButtonText;}
  :where(a,button,input,select,textarea):focus-visible {outline:3px solid Highlight;}
}