/*!
 * Servolution — Accents couleur métier sur vitrines.
 * Touches discrètes : liens vers /<saas>/, cards écosystème, headings de section
 * spécifiques à un SaaS. Pas de pavé plein, pas d'aplat — uniquement bordures,
 * couleurs de texte/lien, gradients subtils.
 *
 * Couleurs métier validées 15/05/2026 :
 *  - Pilotage      OR        #D4AF37
 *  - Commertra     ROUGE     #8B2C3D
 *  - Comptentra    VERT      #059669
 *  - Moventra      ÉMERAUDE  #10B981
 *  - Pooleau       BLEU      #0EA5E9
 *  - Bâtitra       ORANGE    #EA580C
 *  - Weboria       VIOLET    #000080
 */
:root {
  --saas-pilotage:    #D4AF37;
  --saas-pilotage-dk: #B8941F;
  --saas-pilotage-lt: rgba(212, 175, 55, 0.08);

  --saas-commertra:    #000080;
  --saas-commertra-dk: #00005C;
  --saas-commertra-lt: rgba(0, 0, 128, 0.07);

  --saas-comptentra:    #475569;
  --saas-comptentra-dk: #334155;
  --saas-comptentra-lt: rgba(71, 85, 105, 0.07);

  --saas-moventra:    #10B981;
  --saas-moventra-dk: #047857;
  --saas-moventra-lt: rgba(16, 185, 129, 0.07);

  --saas-pooleau:    #0EA5E9;
  --saas-pooleau-dk: #0284C7;
  --saas-pooleau-lt: rgba(14, 165, 233, 0.08);

  --saas-batitra:    #EA580C;
  --saas-batitra-dk: #C2410C;
  --saas-batitra-lt: rgba(234, 88, 12, 0.08);

  --saas-weboria:    #8B2C3D;
  --saas-weboria-dk: #6B1C2D;
  --saas-weboria-lt: rgba(139, 44, 61, 0.07);
}

/* ── Liens texte vers /<saas>/ : couleur sur hover, soulignement discret ─── */
.saas-text a[href^="/pilotage/"]:not(.btn):not(.tcard-cta),
a[href^="/pilotage/"]:where(p, span, li, td, h1, h2, h3, h4) > *,
p a[href^="/pilotage/"], li a[href^="/pilotage/"], span a[href^="/pilotage/"], td a[href^="/pilotage/"] {
  color: var(--saas-pilotage-dk);
  text-decoration: underline;
  text-decoration-color: rgba(184, 148, 31, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s, color .15s;
}
p a[href^="/commertra/"], li a[href^="/commertra/"], span a[href^="/commertra/"], td a[href^="/commertra/"] {
  color: var(--saas-commertra-dk); text-decoration: underline;
  text-decoration-color: rgba(185, 28, 28, 0.4); text-underline-offset: 3px;
}
p a[href^="/comptentra/"], li a[href^="/comptentra/"], span a[href^="/comptentra/"], td a[href^="/comptentra/"] {
  color: var(--saas-comptentra-dk); text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.4); text-underline-offset: 3px;
}
p a[href^="/moventra/"], li a[href^="/moventra/"], span a[href^="/moventra/"], td a[href^="/moventra/"] {
  color: var(--saas-moventra-dk); text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.4); text-underline-offset: 3px;
}
p a[href^="/pooleau/"], li a[href^="/pooleau/"], span a[href^="/pooleau/"], td a[href^="/pooleau/"] {
  color: var(--saas-pooleau-dk); text-decoration: underline;
  text-decoration-color: rgba(2, 132, 199, 0.4); text-underline-offset: 3px;
}
p a[href^="/batitra/"], li a[href^="/batitra/"], span a[href^="/batitra/"], td a[href^="/batitra/"] {
  color: var(--saas-batitra-dk); text-decoration: underline;
  text-decoration-color: rgba(194, 65, 12, 0.4); text-underline-offset: 3px;
}
p a[href^="/weboria/"], li a[href^="/weboria/"], span a[href^="/weboria/"], td a[href^="/weboria/"] {
  color: var(--saas-weboria-dk); text-decoration: underline;
  text-decoration-color: rgba(109, 40, 217, 0.4); text-underline-offset: 3px;
}
p a[href^="/pilotage/"]:hover, li a[href^="/pilotage/"]:hover, span a[href^="/pilotage/"]:hover, td a[href^="/pilotage/"]:hover  { color: var(--saas-pilotage);    text-decoration-color: var(--saas-pilotage); }
p a[href^="/commertra/"]:hover, li a[href^="/commertra/"]:hover, span a[href^="/commertra/"]:hover, td a[href^="/commertra/"]:hover { color: var(--saas-commertra);   text-decoration-color: var(--saas-commertra); }
p a[href^="/comptentra/"]:hover, li a[href^="/comptentra/"]:hover, span a[href^="/comptentra/"]:hover, td a[href^="/comptentra/"]:hover { color: var(--saas-comptentra); text-decoration-color: var(--saas-comptentra); }
p a[href^="/moventra/"]:hover, li a[href^="/moventra/"]:hover, span a[href^="/moventra/"]:hover, td a[href^="/moventra/"]:hover { color: var(--saas-moventra); text-decoration-color: var(--saas-moventra); }
p a[href^="/pooleau/"]:hover, li a[href^="/pooleau/"]:hover, span a[href^="/pooleau/"]:hover, td a[href^="/pooleau/"]:hover { color: var(--saas-pooleau); text-decoration-color: var(--saas-pooleau); }
p a[href^="/batitra/"]:hover, li a[href^="/batitra/"]:hover, span a[href^="/batitra/"]:hover, td a[href^="/batitra/"]:hover { color: var(--saas-batitra); text-decoration-color: var(--saas-batitra); }
p a[href^="/weboria/"]:hover, li a[href^="/weboria/"]:hover, span a[href^="/weboria/"]:hover, td a[href^="/weboria/"]:hover { color: var(--saas-weboria); text-decoration-color: var(--saas-weboria); }

/* ── Cards écosystème (.slv-related .tile) : liseré gauche + accent titre ─ */
.slv-related a.tile[href="/pilotage/"],
.slv-related a.tile[href^="/pilotage/"]    { border-left: 3px solid var(--saas-pilotage); }
.slv-related a.tile[href="/commertra/"],
.slv-related a.tile[href^="/commertra/"]   { border-left: 3px solid var(--saas-commertra); }
.slv-related a.tile[href="/comptentra/"],
.slv-related a.tile[href^="/comptentra/"]  { border-left: 3px solid var(--saas-comptentra); }
.slv-related a.tile[href="/moventra/"],
.slv-related a.tile[href^="/moventra/"]    { border-left: 3px solid var(--saas-moventra); }
.slv-related a.tile[href="/pooleau/"],
.slv-related a.tile[href^="/pooleau/"]     { border-left: 3px solid var(--saas-pooleau); }
.slv-related a.tile[href="/batitra/"],
.slv-related a.tile[href^="/batitra/"]     { border-left: 3px solid var(--saas-batitra); }
.slv-related a.tile[href="/weboria/"],
.slv-related a.tile[href^="/weboria/"]     { border-left: 3px solid var(--saas-weboria); }

.slv-related a.tile[href^="/pilotage/"]:hover   { border-left-width: 4px; background: var(--saas-pilotage-lt); }
.slv-related a.tile[href^="/commertra/"]:hover  { border-left-width: 4px; background: var(--saas-commertra-lt); }
.slv-related a.tile[href^="/comptentra/"]:hover { border-left-width: 4px; background: var(--saas-comptentra-lt); }
.slv-related a.tile[href^="/moventra/"]:hover   { border-left-width: 4px; background: var(--saas-moventra-lt); }
.slv-related a.tile[href^="/pooleau/"]:hover    { border-left-width: 4px; background: var(--saas-pooleau-lt); }
.slv-related a.tile[href^="/batitra/"]:hover    { border-left-width: 4px; background: var(--saas-batitra-lt); }
.slv-related a.tile[href^="/weboria/"]:hover    { border-left-width: 4px; background: var(--saas-weboria-lt); }

.slv-related a.tile[href^="/pilotage/"]   strong { color: var(--saas-pilotage-dk); }
.slv-related a.tile[href^="/commertra/"]  strong { color: var(--saas-commertra-dk); }
.slv-related a.tile[href^="/comptentra/"] strong { color: var(--saas-comptentra-dk); }
.slv-related a.tile[href^="/moventra/"]   strong { color: var(--saas-moventra-dk); }
.slv-related a.tile[href^="/pooleau/"]    strong { color: var(--saas-pooleau-dk); }
.slv-related a.tile[href^="/batitra/"]    strong { color: var(--saas-batitra-dk); }
.slv-related a.tile[href^="/weboria/"]    strong { color: var(--saas-weboria-dk); }

/* ── Trust logos home : liseré bas couleur SaaS au hover ───────────────── */
.trust-logo-link { position: relative; transition: transform .15s; }
.trust-logo-link::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -6px;
  height: 2px; border-radius: 2px; background: transparent; transition: background .2s;
}
.trust-logo-link:hover { transform: translateY(-2px); }
.trust-logo-link[href^="/pilotage/"]:hover::after   { background: var(--saas-pilotage); }
.trust-logo-link[href^="/commertra/"]:hover::after  { background: var(--saas-commertra); }
.trust-logo-link[href^="/comptentra/"]:hover::after { background: var(--saas-comptentra); }
.trust-logo-link[href^="/moventra/"]:hover::after   { background: var(--saas-moventra); }
.trust-logo-link[href^="/pooleau/"]:hover::after    { background: var(--saas-pooleau); }
.trust-logo-link[href^="/batitra/"]:hover::after    { background: var(--saas-batitra); }
.trust-logo-link[href^="/weboria/"]:hover::after    { background: var(--saas-weboria); }

/* ── Cards BCV (bus communication) home : badge logo coloré ─────────────── */
.bcv-card[data-saas="pilotage"]   { border-top: 3px solid var(--saas-pilotage); }
.bcv-card[data-saas="commertra"]  { border-top: 3px solid var(--saas-commertra); }
.bcv-card[data-saas="comptentra"] { border-top: 3px solid var(--saas-comptentra); }
.bcv-card[data-saas="moventra"]   { border-top: 3px solid var(--saas-moventra); }
.bcv-card[data-saas="pooleau"]    { border-top: 3px solid var(--saas-pooleau); }
.bcv-card[data-saas="batitra"]    { border-top: 3px solid var(--saas-batitra); }
.bcv-card[data-saas="weboria"]    { border-top: 3px solid var(--saas-weboria); }

/* ── Sections génériques avec data-saas : barre verticale fine ─────────── */
section[data-saas="pilotage"]   > .wrap > h2 { border-left: 3px solid var(--saas-pilotage);   padding-left: 14px; }
section[data-saas="commertra"]  > .wrap > h2 { border-left: 3px solid var(--saas-commertra);  padding-left: 14px; }
section[data-saas="comptentra"] > .wrap > h2 { border-left: 3px solid var(--saas-comptentra); padding-left: 14px; }
section[data-saas="moventra"]   > .wrap > h2 { border-left: 3px solid var(--saas-moventra);   padding-left: 14px; }
section[data-saas="pooleau"]    > .wrap > h2 { border-left: 3px solid var(--saas-pooleau);    padding-left: 14px; }
section[data-saas="batitra"]    > .wrap > h2 { border-left: 3px solid var(--saas-batitra);    padding-left: 14px; }
section[data-saas="weboria"]    > .wrap > h2 { border-left: 3px solid var(--saas-weboria);    padding-left: 14px; }

/* ── Mention-stack écosystème (chaînes "Pooleau · Comptentra · …") : tags discrets */
.metier-stack { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.metier-stack span[data-saas="pilotage"]   { color: var(--saas-pilotage-dk); }
.metier-stack span[data-saas="commertra"]  { color: var(--saas-commertra-dk); }
.metier-stack span[data-saas="comptentra"] { color: var(--saas-comptentra-dk); }
.metier-stack span[data-saas="moventra"]   { color: var(--saas-moventra-dk); }
.metier-stack span[data-saas="pooleau"]    { color: var(--saas-pooleau-dk); }
.metier-stack span[data-saas="batitra"]    { color: var(--saas-batitra-dk); }
.metier-stack span[data-saas="weboria"]    { color: var(--saas-weboria-dk); }

/* ──────────────────────────────────────────────────────────────────────── */
/* MOBILE-FIRST RESPONSIVE — overrides pour grids inline cassants ─────── */
/* ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Grids inline 2 ou 3 colonnes hardcodées → 1 col mobile */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns:repeat(3, "] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* Hero photo background : repositionner pour mobile (centre) */
  .page-hero { background-position: center !important; padding: 80px 0 60px !important; }
  .slv-pg-hero { padding: 80px 0 60px !important; }
  /* Hero h1 : taille mobile + retirer margin-left:-22px du liseré sinon coupe à gauche */
  .page-hero h1, .slv-pg-hero h1 { margin-left: 0 !important; padding-left: 16px !important; }
  /* Sections .dark : padding mobile + line-height */
  .section.dark { padding: 56px 0 !important; }
  .section.dark h2, .section.dark h2 * { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; line-height: 1.18 !important; }
  /* Packs grid : auto-fit minmax 240 → 1 col sur 375 */
  .packs-grid { grid-template-columns: 1fr !important; }
  /* Metiers-strip : 1 col mobile */
  .metiers-strip .grid { grid-template-columns: 1fr !important; }
  /* CTA buttons : full-width mobile */
  .pack-cta, .pricing-cta, .btn-primary { width: 100%; box-sizing: border-box; text-align: center; }
  /* Header nav : empêcher overflow */
  .nav .wrap, header .wrap { padding: 0 16px !important; }
  /* Trust logos : grid 2 cols sur mobile au lieu de 7 */
  .trust-logos { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 360px; margin: 0 auto; }
  .trust-logo-link img { max-height: 32px; }
  /* Featured-card : 1 col vertical (content au-dessus, preview en bas) */
  .featured-card { flex-direction: column !important; min-height: auto !important; }
  .featured-card .featured-content { padding: 28px 22px !important; }
  .featured-card .preview { min-height: 200px; }
  /* Saas-chips dans packs : wrap proper */
  .pack-saas { gap: 4px !important; }
  .saas-chip { font-size: 0.66rem !important; padding: 2px 7px !important; }
}

@media (max-width: 480px) {
  /* iPhone SE : padding plus serré */
  .wrap { padding: 0 16px !important; }
  h1 { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.7rem) !important; }
  /* Pack-card padding réduit */
  .pack-card { padding: 18px 18px 16px !important; }
  .pack-now { font-size: 1.5rem !important; }
}

/* ──────────────────────────────────────────────────────────────────────── */
/* BONNES PRATIQUES 2026 — accessibility-first, Resonant Stark, micro-anim */
/* Sources: Figma trends 2026, Boundev landing-page-best-practices,        */
/* Elementor web-design-trends, Squarespace Circle.                        */
/* ──────────────────────────────────────────────────────────────────────── */

/* Smooth scroll + meilleur subpixel rendering */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Focus visible AAA — outline or marque, offset 3px */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--saas-pilotage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect reduced-motion (a11y) — coupe toutes animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Ombres 2026 : multi-niveaux, teintées, layered (Resonant Stark) ──── */
:root {
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-pilotage:   0 12px 32px rgba(212, 175, 55, 0.20);
  --shadow-commertra:  0 12px 32px rgba(139, 44, 61, 0.18);
  --shadow-comptentra: 0 12px 32px rgba(71, 85, 105, 0.18);
  --shadow-moventra:   0 12px 32px rgba(16, 185, 129, 0.18);
  --shadow-pooleau:    0 12px 32px rgba(14, 165, 233, 0.20);
  --shadow-batitra:    0 12px 32px rgba(234, 88, 12, 0.20);
  --shadow-weboria:    0 12px 32px rgba(0, 0, 128, 0.18);
}

/* Cards de base : ombre douce, hover ombre plus profonde */
.pack-card { box-shadow: var(--shadow-md); }
.pack-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.pack-card.pack-featured { box-shadow: var(--shadow-lg), var(--shadow-pilotage); }
.pack-card.pack-featured:hover { box-shadow: var(--shadow-xl), var(--shadow-pilotage); }

.tcard { box-shadow: var(--shadow-md); }
.tcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.tcard.tcard-pilotage:hover    { box-shadow: var(--shadow-lg), var(--shadow-pilotage); }
.tcard.tcard-commertra:hover   { box-shadow: var(--shadow-lg), var(--shadow-commertra); }
.tcard.tcard-comptentra:hover  { box-shadow: var(--shadow-lg), var(--shadow-comptentra); }
.tcard.tcard-moventra:hover    { box-shadow: var(--shadow-lg), var(--shadow-moventra); }
.tcard.tcard-pooleau:hover     { box-shadow: var(--shadow-lg), var(--shadow-pooleau); }
.tcard.tcard-batitra:hover     { box-shadow: var(--shadow-lg), var(--shadow-batitra); }
.tcard.tcard-weboria:hover     { box-shadow: var(--shadow-lg), var(--shadow-weboria); }

/* Featured-card : ombre teintée couleur SaaS au hover */
section[data-saas="pilotage"]   .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-pilotage); }
section[data-saas="commertra"]  .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-commertra); }
section[data-saas="comptentra"] .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-comptentra); }
section[data-saas="moventra"]   .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-moventra); }
section[data-saas="pooleau"]    .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-pooleau); }
section[data-saas="batitra"]    .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-batitra); }
section[data-saas="weboria"]    .featured-card:hover { box-shadow: var(--shadow-lg), var(--shadow-weboria); }

/* Pain-card, bcv-card, vs-col, pricing-card : ombres douces uniformes */
.pain-card, .bcv-card, .vs-col, .persona-card, .blog-card, .article-card, .testimonial-card,
.saas-card, .metier-card, .pricing-card { box-shadow: var(--shadow-sm) !important; }
.pain-card:hover, .bcv-card:hover, .vs-col:hover, .persona-card:hover,
.blog-card:hover, .article-card:hover, .testimonial-card:hover,
.saas-card:hover, .metier-card:hover, .pricing-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card.popular { box-shadow: var(--shadow-md) !important; }
.pricing-card.popular:hover { box-shadow: var(--shadow-xl) !important; }

/* Pricing-cta : style + couleur SaaS auto via section[data-saas] body */
.pricing-cta {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding: 11px 20px;
  background: #1f2937;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms;
}
.pricing-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
body[data-saas="pilotage"]   .pricing-cta { background: var(--saas-pilotage-dk); }
body[data-saas="commertra"]  .pricing-cta { background: var(--saas-commertra-dk); }
body[data-saas="comptentra"] .pricing-cta { background: var(--saas-comptentra-dk); }
body[data-saas="moventra"]   .pricing-cta { background: var(--saas-moventra-dk); }
body[data-saas="pooleau"]    .pricing-cta { background: var(--saas-pooleau-dk); }
body[data-saas="batitra"]    .pricing-cta { background: var(--saas-batitra-dk); }
body[data-saas="weboria"]    .pricing-cta { background: var(--saas-weboria-dk); }
body[data-saas="pilotage"]   .pricing-cta:hover { background: var(--saas-pilotage); color: #1f2937 !important; box-shadow: var(--shadow-md), var(--shadow-pilotage); }
body[data-saas="commertra"]  .pricing-cta:hover { background: var(--saas-commertra); box-shadow: var(--shadow-md), var(--shadow-commertra); }
body[data-saas="comptentra"] .pricing-cta:hover { background: var(--saas-comptentra); box-shadow: var(--shadow-md), var(--shadow-comptentra); }
body[data-saas="moventra"]   .pricing-cta:hover { background: var(--saas-moventra); box-shadow: var(--shadow-md), var(--shadow-moventra); }
body[data-saas="pooleau"]    .pricing-cta:hover { background: var(--saas-pooleau); box-shadow: var(--shadow-md), var(--shadow-pooleau); }
body[data-saas="batitra"]    .pricing-cta:hover { background: var(--saas-batitra); box-shadow: var(--shadow-md), var(--shadow-batitra); }
body[data-saas="weboria"]    .pricing-cta:hover { background: var(--saas-weboria); box-shadow: var(--shadow-md), var(--shadow-weboria); }

/* CTA buttons : ombre teintée or quand .cta + lift au hover */
.cta.slv-fx-glow, .cta { box-shadow: var(--shadow-md); }
.cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 8px 24px rgba(212, 175, 55, 0.30); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Pack-cta : ombre profonde au hover */
.pack-cta { box-shadow: var(--shadow-sm); }
.pack-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Parallaxe scroll natif (CSS-only, fallback gracieux) ──────────────── */
@supports (animation-timeline: scroll()) {
  /* Hero principal home : mockup + mockup-float glissent à vitesses différentes
     animation-timeline: view() progresse pendant la traversée du viewport */
  .hero .mockup, .hero-visual .mockup, .hero img.hero-mockup,
  .page-hero img, .page-hero .preview,
  .featured-card .preview img, .slv-pg-hero img,
  [data-parallax], .slv-parallax {
    animation: slv-parallax-up linear;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
  @keyframes slv-parallax-up {
    from { transform: translateY(60px); }
    to   { transform: translateY(-60px); }
  }

  /* Mockup-float (2e calque flottant) : plus rapide → effet profondeur */
  .hero .mockup-float, .hero-visual .mockup-float {
    animation: slv-parallax-fast linear;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
  @keyframes slv-parallax-fast {
    from { transform: translateY(90px) rotate(-3deg); }
    to   { transform: translateY(-90px) rotate(0deg); }
  }

  /* Hero photo de fond (filigrane) : drift léger horizontal */
  .slv-pg-hero::after {
    animation: slv-parallax-drift linear;
    animation-timeline: scroll(root);
    animation-range: 0vh 100vh;
  }
  @keyframes slv-parallax-drift {
    from { transform: translate(0, 0) scale(1); opacity: 0.14; }
    to   { transform: translate(-40px, -30px) scale(1.06); opacity: 0.10; }
  }

  /* Trust logos (mosaïque 7 SaaS home) : fade-in successif au scroll */
  .trust-logos .trust-logo-link {
    animation: slv-fade-up-trust linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes slv-fade-up-trust {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Sections de fond : parallax très subtil (8px) sur l'illustration de fond */
  .pain-section::before, .solution-section::before, .pricing-section::before {
    animation: slv-parallax-bg linear;
    animation-timeline: scroll(root);
    animation-range: 0vh 200vh;
  }
  @keyframes slv-parallax-bg {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(40px) scale(1.05); }
  }

  /* Halo or sur page-hero qui bouge légèrement (effet profondeur) */
  .page-hero::before {
    animation: slv-parallax-halo linear;
    animation-timeline: scroll(root);
    animation-range: 0vh 100vh;
  }
  @keyframes slv-parallax-halo {
    from { transform: translate(0, 0); opacity: 1; }
    to   { transform: translate(40px, -60px); opacity: 0.4; }
  }
}

/* Reveal-on-scroll natif (Chrome 115+, Safari 26+, Firefox 130+) via animation-timeline:view() */
@supports (animation-timeline: view()) {
  .pack-card, .tcard, .pain-card, .bcv-card, .featured-card, .vs-col,
  .persona-card, .blog-card, .saas-card, .metier-card, .feat-list .item {
    animation: slv-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes slv-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Fallback IntersectionObserver-friendly : tout reste visible */
.pack-card, .tcard, .pain-card, .bcv-card, .featured-card { will-change: transform, box-shadow; }

/* Typo hierarchy clamp() fluide (Resonant Stark : calme + grande typo) */
h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 900; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 800; }

/* Spacing généreux entre sections (2026 whitespace) */
section.section { padding: clamp(56px, 8vw, 96px) 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Section-label : uppercase fin, tracking large, taille petite (touche éditoriale 2026) */
.section-label, .kicker, .trust-label {
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 16px;
}

/* Body text : ligne 1.65 pour lisibilité — corps en gris-anthracite */
p.sub, p.lead { color: #475569; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; max-width: 720px; }

/* Boutons : padding plus généreux, font-weight 700 (sans toucher transitions existantes) */
.btn-orange, .btn-primary, .pack-cta, .tcard-cta, .cta {
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.005em;
  display: inline-block;
}

/* Selection : highlight or doux */
::selection { background: rgba(212, 175, 55, 0.22); color: #1f2937; }

/* Liens dans body : underline offset 3px (2026 standard) */
.wrap p a:not([class*="btn"]):not([class*="tile"]):not([class*="cta"]):not([class*="chip"]):not([class*="link"]) {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ──────────────────────────────────────────────────────────────────────── */
/* OVERRIDE GLOBAL — neutraliser le marron #B05A3B par défaut, harmoniser  */
/* tout le site sur palette claire + accents couleur métier ciblés.        */
/* Marque ombrelle Servolution → or Pilotage (#D4AF37) sur CTAs génériques.*/
/* ──────────────────────────────────────────────────────────────────────── */

/* Boutons génériques : btn-orange / btn-primary (hors data-saas) → or Pilotage */
.btn-orange:not([data-saas]),
.btn-primary:not([data-saas]) {
  background: var(--saas-pilotage-dk) !important;
  color: #fff !important;
  border-color: var(--saas-pilotage-dk) !important;
}
.btn-orange:not([data-saas]):hover,
.btn-primary:not([data-saas]):hover {
  background: var(--saas-pilotage) !important;
  color: #1f2937 !important;
}

/* Liens "voir tout / en savoir plus" en marron par défaut → or */
a.link-orange, a.read-more, .section a[href]:not([class*="btn"]):not([class*="tile"]):not([class*="cta"]):not([class*="featured"]):hover {
  color: var(--saas-pilotage-dk);
}

/* Callout (encart promo) : fond marron → fond clair + bordure or */
.callout {
  background: linear-gradient(135deg, #FAFAF7 0%, #FFFFFF 100%) !important;
  border: 1px solid #E5E7EB !important;
  border-left: 3px solid var(--saas-pilotage) !important;
  color: #1f2937 !important;
}
.callout h2, .callout h3, .callout strong { color: #1f2937 !important; }

/* Section .dark : anthracite chaud stone-900 (pas bleu marine) + accents or */
.section.dark, section.dark {
  background: linear-gradient(135deg, #1c1917 0%, #292524 60%, #1c1917 100%) !important;
  color: #fafaf7 !important;
  border-top: 3px solid var(--saas-pilotage);
}
.section.dark h2, section.dark h2,
.section.dark h2 *, section.dark h2 * { color: #ffffff !important; }
.section.dark .section-label, section.dark .section-label,
.section.dark .kicker, section.dark .kicker { color: var(--saas-pilotage) !important; }
.section.dark p, section.dark .sub, section.dark .lead,
.section.dark p *, section.dark .sub * { color: rgba(255, 255, 255, 0.85) !important; }
.section.dark strong, section.dark strong * { color: var(--saas-pilotage) !important; }
.section.dark a:not(.btn-orange):not(.btn-primary) { color: var(--saas-pilotage) !important; }
.section.dark .btn-orange, section.dark .btn-orange { background: var(--saas-pilotage-dk) !important; color: #fff !important; }
.section.dark .btn-orange:hover, section.dark .btn-orange:hover { background: var(--saas-pilotage) !important; color: #1f2937 !important; }

/* Slv-pg-hero : garde l'image inline, overlay anthracite chaud (pas bleu) */
.slv-pg-hero {
  position: relative;
  color: #fff !important;
  border-bottom: 3px solid var(--saas-pilotage) !important;
}
.slv-pg-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 25, 23, 0.55) 0%, rgba(28, 25, 23, 0.35) 50%, rgba(28, 25, 23, 0.60) 100%);
  z-index: 1;
  pointer-events: none;
}
.slv-pg-hero > .wrap, .slv-pg-hero .wrap { position: relative; z-index: 2; }
.slv-pg-hero h1, .slv-pg-hero h2, .slv-pg-hero h3 {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
}
.slv-pg-hero .lead, .slv-pg-hero p:not(.kicker):not([class*="label"]) {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.slv-pg-hero .kicker, .slv-pg-hero [class*="kicker"], .slv-pg-hero [class*="label"] {
  color: var(--saas-pilotage) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
  letter-spacing: 0.14em;
}

/* slv-fx-glow (CTA en bouton brillant marron) : or Pilotage */
.cta.slv-fx-glow, a.cta:not([class*="header"]) {
  background: var(--saas-pilotage-dk) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.25);
}
.cta.slv-fx-glow:hover { background: var(--saas-pilotage) !important; color: #1f2937 !important; }

/* Background utilities qui pointaient sur var(--brown) — neutraliser sur pages globales */
[style*="background:var(--brown)"]:not(section[data-saas] *),
[style*="background: var(--brown)"]:not(section[data-saas] *) {
  background: var(--saas-pilotage-dk) !important;
}

/* Section-label par défaut (hors data-saas) en or — ligne directrice marque */
.section .section-label:not([style*="color"]),
section:not([data-saas]) .section-label { color: var(--saas-pilotage-dk); }

/* Mention "section pour" : background subtil teinté or au lieu de marron */
.section[style*="background:var(--cream)"],
.section[style*="background: var(--cream)"] {
  background: #FAFAF7 !important;
}

/* Trust labels / kicker en marron → or */
.kicker, .trust-label { color: var(--saas-pilotage-dk) !important; }

/* ── Hero global : photo de fond + overlay anthracite chaud (pas bleu) ─── */
.page-hero {
  background-color: #1c1917 !important; /* warm stone-900 fallback, pas bleu */
  background-image:
    linear-gradient(135deg, rgba(28, 25, 23, 0.60) 0%, rgba(41, 37, 36, 0.45) 50%, rgba(28, 25, 23, 0.60) 100%),
    var(--page-hero-bg, url('/img/metiers/pilotage_dirigeant_laptop.jpg')) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
  position: relative;
  border-bottom: 3px solid var(--saas-pilotage);
  overflow: hidden;
}
/* Halos couleurs SaaS très subtils par-dessus (transparence, identité marque) */
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(212, 175, 55, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(234, 88, 12, 0.12) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero h1, .page-hero h1 * { color: #fff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.page-hero .lead, .page-hero p { color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); }
.page-hero .kicker, .page-hero [class*="kicker"] { color: var(--saas-pilotage) !important; letter-spacing: 0.14em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); }

/* CTA header "Tester gratuitement" : marron → or Pilotage (marque ombrelle) */
.nav nav a.cta { background: var(--saas-pilotage-dk) !important; color: #fff !important; }
.nav nav a.cta:hover { background: var(--saas-pilotage) !important; color: #1f2937 !important; }

/* ── Hero accent : fine ligne basse pour pages dédiées à un SaaS ───────── */
body[data-saas="pilotage"]   .hero::after,
body[data-saas="commertra"]  .hero::after,
body[data-saas="comptentra"] .hero::after,
body[data-saas="moventra"]   .hero::after,
body[data-saas="pooleau"]    .hero::after,
body[data-saas="batitra"]    .hero::after,
body[data-saas="weboria"]    .hero::after {
  content: ""; display: block; height: 3px; width: 100%; margin-top: 0;
}
body[data-saas="pilotage"]   .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-pilotage)   50%, transparent 100%); }
body[data-saas="commertra"]  .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-commertra)  50%, transparent 100%); }
body[data-saas="comptentra"] .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-comptentra) 50%, transparent 100%); }
body[data-saas="moventra"]   .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-moventra)   50%, transparent 100%); }
body[data-saas="pooleau"]    .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-pooleau)    50%, transparent 100%); }
body[data-saas="batitra"]    .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-batitra)    50%, transparent 100%); }
body[data-saas="weboria"]    .hero::after { background: linear-gradient(90deg, transparent 0%, var(--saas-weboria)    50%, transparent 100%); }

/* ── Sections page nos-logiciels.html (data-saas posé) ────────────────── */
/* Pinceau fin : SEULE la section-label porte la couleur SaaS. */
/* Titre h2 et items reste sobre/anthracite — la couleur sert d'aiguille, pas de pavé. */
section[data-saas="pilotage"]   .section-label { color: var(--saas-pilotage); }
section[data-saas="commertra"]  .section-label { color: var(--saas-commertra); }
section[data-saas="comptentra"] .section-label { color: var(--saas-comptentra); }
section[data-saas="moventra"]   .section-label { color: var(--saas-moventra); }
section[data-saas="pooleau"]    .section-label { color: var(--saas-pooleau); }
section[data-saas="batitra"]    .section-label { color: var(--saas-batitra); }
section[data-saas="weboria"]    .section-label { color: var(--saas-weboria); }
/* h2 et h4 reste anthracite — pas de couleur pleine sur titres */
section[data-saas] h2 { color: #1f2937 !important; }
section[data-saas] .feat-list .item h4 { color: #1f2937 !important; }
/* Items : pas de border, pas de hover-bg coloré — simple typo, fond très subtilement teinté */
section[data-saas] .feat-list .item { background: transparent; border: 0; padding-left: 0; }

/* Btn-primary in section[data-saas] : couleur SaaS */
section[data-saas="pilotage"]   .btn-primary { background: var(--saas-pilotage); color: #fff; }
section[data-saas="commertra"]  .btn-primary { background: var(--saas-commertra); color: #fff; }
section[data-saas="comptentra"] .btn-primary { background: var(--saas-comptentra); color: #fff; }
section[data-saas="moventra"]   .btn-primary { background: var(--saas-moventra); color: #fff; }
section[data-saas="pooleau"]    .btn-primary { background: var(--saas-pooleau); color: #fff; }
section[data-saas="batitra"]    .btn-primary { background: var(--saas-batitra); color: #fff; }
section[data-saas="weboria"]    .btn-primary { background: var(--saas-weboria); color: #fff; }
section[data-saas="pilotage"]   .btn-primary:hover { background: var(--saas-pilotage-dk); }
section[data-saas="commertra"]  .btn-primary:hover { background: var(--saas-commertra-dk); }
section[data-saas="comptentra"] .btn-primary:hover { background: var(--saas-comptentra-dk); }
section[data-saas="moventra"]   .btn-primary:hover { background: var(--saas-moventra-dk); }
section[data-saas="pooleau"]    .btn-primary:hover { background: var(--saas-pooleau-dk); }
section[data-saas="batitra"]    .btn-primary:hover { background: var(--saas-batitra-dk); }
section[data-saas="weboria"]    .btn-primary:hover { background: var(--saas-weboria-dk); }

/* Featured-card : override fond marron par défaut → blanc + filet 2px haut couleur SaaS */
section[data-saas] .featured-card {
  background: #fff !important;
  border-top: 2px solid transparent;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  color: #1f2937;
}
section[data-saas] .featured-card:hover {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.10);
}
section[data-saas] .featured-card .featured-content { color: #1f2937 !important; }
section[data-saas] .featured-card .featured-content p { color: #475569 !important; }
section[data-saas] .featured-card .featured-meta { color: #64748b !important; }
section[data-saas] .featured-card .featured-meta span:nth-child(2n-1) { color: #1f2937 !important; }
section[data-saas] .featured-card .preview { background: #f8fafc !important; }
section[data-saas] .featured-card .featured-tagline { font-weight: 700; }
section[data-saas="pilotage"]   .featured-card { border-top-color: var(--saas-pilotage); }
section[data-saas="pilotage"]   .featured-card .featured-tagline { color: var(--saas-pilotage-dk) !important; }
section[data-saas="commertra"]  .featured-card .featured-tagline { color: var(--saas-commertra-dk) !important; }
section[data-saas="comptentra"] .featured-card .featured-tagline { color: var(--saas-comptentra-dk) !important; }
section[data-saas="moventra"]   .featured-card .featured-tagline { color: var(--saas-moventra-dk) !important; }
section[data-saas="pooleau"]    .featured-card .featured-tagline { color: var(--saas-pooleau-dk) !important; }
section[data-saas="batitra"]    .featured-card .featured-tagline { color: var(--saas-batitra-dk) !important; }
section[data-saas="weboria"]    .featured-card .featured-tagline { color: var(--saas-weboria-dk) !important; }
section[data-saas="pilotage"]   .featured-card h3 { color: var(--saas-pilotage-dk) !important; }
section[data-saas="commertra"]  .featured-card h3 { color: var(--saas-commertra-dk) !important; }
section[data-saas="comptentra"] .featured-card h3 { color: var(--saas-comptentra-dk) !important; }
section[data-saas="moventra"]   .featured-card h3 { color: var(--saas-moventra-dk) !important; }
section[data-saas="pooleau"]    .featured-card h3 { color: var(--saas-pooleau-dk) !important; }
section[data-saas="batitra"]    .featured-card h3 { color: var(--saas-batitra-dk) !important; }
section[data-saas="weboria"]    .featured-card h3 { color: var(--saas-weboria-dk) !important; }
section[data-saas="dummy"]   .featured-card { border-top-color: var(--saas-pilotage); }
section[data-saas="commertra"]  .featured-card { border-top-color: var(--saas-commertra); }
section[data-saas="comptentra"] .featured-card { border-top-color: var(--saas-comptentra); }
section[data-saas="moventra"]   .featured-card { border-top-color: var(--saas-moventra); }
section[data-saas="pooleau"]    .featured-card { border-top-color: var(--saas-pooleau); }
section[data-saas="batitra"]    .featured-card { border-top-color: var(--saas-batitra); }
section[data-saas="weboria"]    .featured-card { border-top-color: var(--saas-weboria); }
section[data-saas="pilotage"]   .featured-card h3 { color: var(--saas-pilotage-dk); }
section[data-saas="commertra"]  .featured-card h3 { color: var(--saas-commertra-dk); }
section[data-saas="comptentra"] .featured-card h3 { color: var(--saas-comptentra-dk); }
section[data-saas="moventra"]   .featured-card h3 { color: var(--saas-moventra-dk); }
section[data-saas="pooleau"]    .featured-card h3 { color: var(--saas-pooleau-dk); }
section[data-saas="batitra"]    .featured-card h3 { color: var(--saas-batitra-dk); }
section[data-saas="weboria"]    .featured-card h3 { color: var(--saas-weboria-dk); }
section[data-saas="pilotage"]   .featured-cta { color: var(--saas-pilotage-dk); }
section[data-saas="commertra"]  .featured-cta { color: var(--saas-commertra-dk); }
section[data-saas="comptentra"] .featured-cta { color: var(--saas-comptentra-dk); }
section[data-saas="moventra"]   .featured-cta { color: var(--saas-moventra-dk); }
section[data-saas="pooleau"]    .featured-cta { color: var(--saas-pooleau-dk); }
section[data-saas="batitra"]    .featured-cta { color: var(--saas-batitra-dk); }
section[data-saas="weboria"]    .featured-cta { color: var(--saas-weboria-dk); }

/* ── Metiers strip (3 photos d'illustration usage SaaS) ────────────────── */
.metiers-strip {
  padding: clamp(48px, 7vw, 80px) 0;
  background: linear-gradient(180deg, #ffffff 0%, #FAFAF7 100%);
  border-top: 1px solid #F1F5F9;
}
.metiers-strip .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.metiers-strip .kicker {
  color: var(--saas-pilotage-dk); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 6px;
}
.metiers-strip h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: #1f2937;
  letter-spacing: -0.02em; margin: 0 0 26px;
}
.metiers-strip .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.metiers-strip .mcard {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.metiers-strip .mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.metiers-strip .mcard img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.metiers-strip .mcard:hover img { transform: scale(1.06); }
.metiers-strip .mcard .caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 70%);
  color: #fff;
}
.metiers-strip .mcard .caption strong {
  display: block; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em;
}
.metiers-strip .mcard .caption span {
  display: block; font-size: 0.78rem; opacity: 0.92; margin-top: 2px;
}
.metiers-strip .mcard[data-saas="pilotage"]   .caption strong { color: var(--saas-pilotage); }
.metiers-strip .mcard[data-saas="commertra"]  .caption strong { color: #D4A5AC; }
.metiers-strip .mcard[data-saas="comptentra"] .caption strong { color: #CBD5E1; }
.metiers-strip .mcard[data-saas="moventra"]   .caption strong { color: #6EE7B7; }
.metiers-strip .mcard[data-saas="pooleau"]    .caption strong { color: #7DD3FC; }
.metiers-strip .mcard[data-saas="batitra"]    .caption strong { color: #FDBA74; }
.metiers-strip .mcard[data-saas="weboria"]    .caption strong { color: #C4B5FD; }

/* ── Packs cards (tarifs.html : remplace l'ancien tableau) ─────────────── */
.packs-categories { display: flex; flex-direction: column; gap: 52px; margin: 36px 0 0; }
.packs-cat-title { font-size: 1.25rem; font-weight: 800; color: #1f2937; margin: 0 0 4px; letter-spacing: -0.01em; }
.packs-cat-sub { color: #64748b; font-size: 0.93rem; margin: 0 0 20px; }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pack-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s, transform .15s, border-color .15s; }
.pack-card:hover { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); transform: translateY(-2px); border-color: #cbd5e1; }
.pack-head h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1f2937; letter-spacing: -0.01em; }
.pack-head .pack-sub { color: #64748b; font-size: 0.82rem; margin: 4px 0 0; }
.pack-saas { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; }
.saas-chip { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid; line-height: 1.3; }
.saas-chip[data-saas="pilotage"]   { border-color: var(--saas-pilotage);   color: var(--saas-pilotage-dk); }
.saas-chip[data-saas="commertra"]  { border-color: var(--saas-commertra);  color: var(--saas-commertra-dk); }
.saas-chip[data-saas="comptentra"] { border-color: var(--saas-comptentra); color: var(--saas-comptentra-dk); }
.saas-chip[data-saas="moventra"]   { border-color: var(--saas-moventra);   color: var(--saas-moventra-dk); }
.saas-chip[data-saas="pooleau"]    { border-color: var(--saas-pooleau);    color: var(--saas-pooleau-dk); }
.saas-chip[data-saas="batitra"]    { border-color: var(--saas-batitra);    color: var(--saas-batitra-dk); }
.saas-chip[data-saas="weboria"]    { border-color: var(--saas-weboria);    color: var(--saas-weboria-dk); }
.saas-chip[data-saas="addon"]      { border-color: #cbd5e1; color: #475569; }
.pack-price { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.pack-old { color: #94a3b8; text-decoration: line-through; font-size: 0.78rem; }
.pack-now { font-size: 1.7rem; font-weight: 900; color: #1f2937; letter-spacing: -0.02em; }
.pack-now small { font-size: 0.55em; font-weight: 600; color: #64748b; margin-left: 2px; }
.pack-save { display: inline-block; font-size: 0.7rem; font-weight: 800; color: #047857; background: rgba(5, 150, 105, 0.08); padding: 3px 9px; border-radius: 4px; align-self: flex-start; margin-top: 4px; }
.pack-ttc { font-size: 0.72rem; color: #94a3b8; }
.pack-cta { display: block; text-align: center; margin-top: auto; padding: 11px 20px; background: #1f2937; color: #fff; border-radius: 8px; font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: background .15s; letter-spacing: -0.005em; }
.pack-cta:hover { background: #0f172a; color: #fff; }
.pack-card.pack-featured { border: 2px solid var(--saas-pilotage); position: relative; }
.pack-card.pack-featured::before { content: "★ LE PLUS COMPLET"; position: absolute; top: -11px; left: 16px; background: var(--saas-pilotage); color: #1f2937; font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.06em; }

/* ── Boutons « En savoir plus » sur SaaS-spécifique ────────────────────── */
.btn-saas[data-saas="pilotage"]   { border: 1px solid var(--saas-pilotage);   color: var(--saas-pilotage-dk); }
.btn-saas[data-saas="commertra"]  { border: 1px solid var(--saas-commertra);  color: var(--saas-commertra-dk); }
.btn-saas[data-saas="comptentra"] { border: 1px solid var(--saas-comptentra); color: var(--saas-comptentra-dk); }
.btn-saas[data-saas="moventra"]   { border: 1px solid var(--saas-moventra);   color: var(--saas-moventra-dk); }
.btn-saas[data-saas="pooleau"]    { border: 1px solid var(--saas-pooleau);    color: var(--saas-pooleau-dk); }
.btn-saas[data-saas="batitra"]    { border: 1px solid var(--saas-batitra);    color: var(--saas-batitra-dk); }
.btn-saas[data-saas="weboria"]    { border: 1px solid var(--saas-weboria);    color: var(--saas-weboria-dk); }
.btn-saas { display: inline-block; padding: 8px 18px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background .15s, color .15s; }
.btn-saas[data-saas="pilotage"]:hover   { background: var(--saas-pilotage);   color: #fff; }
.btn-saas[data-saas="commertra"]:hover  { background: var(--saas-commertra);  color: #fff; }
.btn-saas[data-saas="comptentra"]:hover { background: var(--saas-comptentra); color: #fff; }
.btn-saas[data-saas="moventra"]:hover   { background: var(--saas-moventra);   color: #fff; }
.btn-saas[data-saas="pooleau"]:hover    { background: var(--saas-pooleau);    color: #fff; }
.btn-saas[data-saas="batitra"]:hover    { background: var(--saas-batitra);    color: #fff; }
.btn-saas[data-saas="weboria"]:hover    { background: var(--saas-weboria);    color: #fff; }