/**
 * module.css — pages modules (refonte 2026 des fiches product), préfixe syn-fn-.
 * Reprise de la maquette « page-demo-modules-tous-champs-acf », puis les ajouts propres au gabarit
 * WordPress en fin de fichier. Chargée par app/Produits/module.php, sur les seules fiches refondues.
 */
.syn-fn {
  --syn-accent: #4164e6;
  --syn-accent-dark: #2f4fc4;
  --syn-navy: #1e294e;
  --syn-muted: #4a5577;
  --syn-bg-soft: #f2f6ff;
  --syn-bg-tint: #eef2ff;
  --syn-border: #e2e7fc;
  --syn-border-strong: #c2cdf8;
  font-family: 'Roboto', Arial, sans-serif; font-size: 16px; color: var(--syn-navy);
  line-height: 1.7; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
}
.syn-fn *, .syn-fn *::before, .syn-fn *::after { box-sizing: border-box; }
.syn-fn .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
.syn-fn .material-symbols-outlined::before { content: attr(data-i); }
.syn-fn ul, .syn-fn ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.syn-fn li { list-style: none !important; margin: 0 !important; padding: 0 !important; background-image: none !important; }
.syn-fn li::before, .syn-fn li::after { content: none !important; display: none !important; }
.syn-fn li::marker { content: "" !important; }
.syn-fn p { margin: 0 0 16px 0; font-size: 16px; line-height: 1.75; color: var(--syn-navy); }
.syn-fn a { transition: color 0.15s, background 0.15s, transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.syn-fn img { max-width: 100%; height: auto; display: block; }
.syn-fn-section { margin: 0 0 64px 0; scroll-margin-top: 110px; }
.syn-fn-eyebrow { font-size: 14px !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--syn-accent) !important; margin: 0 0 14px 0 !important; }
.syn-fn h1.syn-fn-h1 { font-family: 'Barlow', Arial, sans-serif; font-size: 54px; font-weight: 700; line-height: 1.1; color: var(--syn-navy); margin: 0 0 22px 0; letter-spacing: -0.5px; }
.syn-fn h1.syn-fn-h1 span { color: var(--syn-accent); }
.syn-fn h2.syn-fn-h2 { font-family: 'Barlow', Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; color: var(--syn-navy); margin: 0 0 18px 0; }
.syn-fn h3.syn-fn-h3 { font-family: 'Barlow', Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--syn-navy); margin: 0; }
.syn-fn-intro { max-width: 900px; font-size: 17px !important; color: var(--syn-muted) !important; margin-bottom: 32px !important; }
.syn-fn-intro strong { color: var(--syn-navy); }
.syn-fn-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; margin: 0 0 64px 0; }
.syn-fn-lead { font-size: 18px !important; font-weight: 300; color: var(--syn-muted) !important; max-width: 560px; margin-bottom: 30px !important; }
.syn-fn-hero-visual { background: var(--syn-bg-soft); border-radius: 30px; padding: 24px; }
.syn-fn-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.syn-fn-btns-center { justify-content: center; gap: 16px 30px; }
.syn-fn a.syn-fn-btn { position: relative; z-index: 1; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; background: var(--syn-accent); color: #ffffff !important; border: 1.5px solid var(--syn-accent); font-weight: 500; font-size: 16px; line-height: 1.18; padding: 12px 28px; border-radius: 24px; text-decoration: none !important; cursor: pointer; transition: color 0.25s cubic-bezier(0.55, 0, 0.1, 1); }
.syn-fn a.syn-fn-btn::before { content: " "; position: absolute; top: 0; right: 0; left: 0; height: 200%; z-index: -1; background: #f1f3fb; transform: translateY(50%); border-radius: 50%; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.syn-fn a.syn-fn-btn:hover { color: var(--syn-accent) !important; transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.syn-fn a.syn-fn-btn:hover::before { transform: translateY(0); border-radius: 5%; }
.syn-fn-btn .material-symbols-outlined { font-size: 20px; }
.syn-fn a.syn-fn-btn-white { background: #ffffff; color: var(--syn-accent) !important; border-color: #ffffff; }
.syn-fn a.syn-fn-btn-white::before { background: var(--syn-accent); }
.syn-fn a.syn-fn-btn-white:hover { color: #ffffff !important; }
.syn-fn a.syn-fn-btn-outline { background: transparent; color: #ffffff !important; border-color: #ffffff; }
.syn-fn a.syn-fn-btn-outline::before { background: #ffffff; }
.syn-fn a.syn-fn-btn-outline:hover { color: var(--syn-accent) !important; }
.syn-fn-note { display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; background: var(--syn-navy); border-radius: 20px; padding: 26px 30px; }
.syn-fn-note .material-symbols-outlined { font-size: 28px; color: #ffffff; background: var(--syn-accent); border-radius: 50%; padding: 8px; flex-shrink: 0; }
.syn-fn-note p { margin: 0; color: #ffffff !important; font-size: 16px; line-height: 1.7; }
.syn-fn ul.syn-fn-checks { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 24px; padding: 22px 0 4px 0 !important; border-top: 1px solid var(--syn-border); }
.syn-fn-checks li { display: flex !important; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--syn-navy); }
.syn-fn-checks .material-symbols-outlined { font-size: 20px; color: var(--syn-accent); flex-shrink: 0; margin-top: 1px; }
.syn-fn-ei { background: var(--syn-bg-soft); border-radius: 30px; padding: 48px; }
.syn-fn-ei-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.syn-fn-ei-text p:last-child { margin-bottom: 0; }
.syn-fn-article { display: flex; align-items: center; gap: 20px; background: #ffffff; border: 1px solid var(--syn-border-strong); border-radius: 20px; padding: 22px 26px; }
.syn-fn-article-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--syn-bg-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-fn-article-icon .material-symbols-outlined { font-size: 26px; color: var(--syn-accent); }
.syn-fn-article-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.syn-fn-article-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--syn-accent); }
.syn-fn-article-title { font-family: 'Barlow', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--syn-navy); }
.syn-fn-faq-item { border-bottom: 1px solid var(--syn-border-strong); }
.syn-fn-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.syn-fn-faq-item > summary::-webkit-details-marker { display: none; }
.syn-fn-faq-item > summary::marker { content: ""; }
.syn-fn h3.syn-fn-faq-q { font-family: 'Barlow', Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--syn-navy); margin: 0; }
.syn-fn-faq-item > summary:hover h3.syn-fn-faq-q { color: var(--syn-accent); }
.syn-fn-faq-toggle { flex-shrink: 0; position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--syn-bg-tint); border: 1px solid var(--syn-border-strong); transition: background 0.3s, transform 0.3s; }
.syn-fn-faq-toggle::before, .syn-fn-faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; border-radius: 2px; background: var(--syn-accent); transform: translate(-50%, -50%); transition: background 0.3s; }
.syn-fn-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.syn-fn-faq-item[open] .syn-fn-faq-toggle { background: var(--syn-accent); border-color: var(--syn-accent); transform: rotate(45deg); }
.syn-fn-faq-item[open] .syn-fn-faq-toggle::before, .syn-fn-faq-item[open] .syn-fn-faq-toggle::after { background: #ffffff; }
.syn-fn-faq-a { padding: 0 0 28px 0; }
.syn-fn-faq-a p { margin: 0 0 12px 0; }
.syn-fn-faq-a p:last-child { margin: 0; }
.syn-fn-cta { background: var(--syn-accent); width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 48px 20px; text-align: center; }
.syn-fn-cta .syn-fn-eyebrow { color: #c7d3ff !important; font-weight: 500; letter-spacing: 0.5px; }
.syn-fn h2.syn-fn-cta-title { font-family: 'Barlow', Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.15; color: #ffffff; margin: 0 auto 16px auto; max-width: 420px; }
.syn-fn-cta-text { color: #ffffff !important; font-weight: 300; max-width: 560px; margin: 0 auto 26px auto !important; line-height: 1.5 !important; }

.syn-fn-hero-visual { padding: 0; background: transparent; }
.syn-fn ul.syn-fn-chips { display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 0 30px 0 !important; }
.syn-fn li.syn-fn-chip { display: inline-flex !important; align-items: center; gap: 8px; background: #ffffff; border: 1px solid var(--syn-border-strong); color: var(--syn-navy); font-size: 14px; font-weight: 500; padding: 7px 16px !important; border-radius: 30px; }
.syn-fn-chip .material-symbols-outlined { font-size: 18px; color: var(--syn-accent); }
.syn-fn a.syn-fn-txtlink, .syn-fn-intro a, .syn-fn-feat p a, .syn-fn-ei-text p a { color: var(--syn-accent); text-decoration: underline; text-decoration-color: var(--syn-border-strong); text-underline-offset: 3px; font-weight: 500; }
.syn-fn-intro a:hover, .syn-fn-feat p a:hover, .syn-fn-ei-text p a:hover { text-decoration-color: var(--syn-accent); }
.syn-fn-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; margin-bottom: 32px; }
.syn-fn-split .syn-fn-intro { margin-bottom: 0 !important; }
.syn-fn ul.syn-fn-modes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.syn-fn li.syn-fn-mode { display: flex !important; align-items: center; gap: 14px; background: var(--syn-bg-soft); border: 1px solid var(--syn-border); border-radius: 20px; padding: 18px 20px !important; font-family: 'Barlow', Arial, sans-serif; font-weight: 600; font-size: 18px; color: var(--syn-navy); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.syn-fn li.syn-fn-mode:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(65,100,230,0.14); }
.syn-fn-mode .material-symbols-outlined { width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 1px solid var(--syn-border-strong); color: var(--syn-accent); font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-fn-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.syn-fn-list { background: #ffffff; border: 1px solid var(--syn-border); border-radius: 30px; padding: 32px 34px; }
.syn-fn-list-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.syn-fn-list-head .material-symbols-outlined { width: 44px; height: 44px; border-radius: 14px; background: var(--syn-bg-tint); color: var(--syn-accent); font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-fn p.syn-fn-list-title { font-family: 'Barlow', Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0; padding-top: 8px; }
.syn-fn .syn-fn-list ul.syn-fn-checks { grid-template-columns: 1fr; gap: 12px; padding: 20px 0 0 0 !important; }
.syn-fn-list-dark { background: var(--syn-navy); border-color: var(--syn-navy); }
.syn-fn-list-dark p.syn-fn-list-title, .syn-fn-list-dark .syn-fn-checks li { color: #ffffff; }
.syn-fn-list-dark ul.syn-fn-checks { border-top-color: rgba(255,255,255,0.18); }
.syn-fn-list-dark .syn-fn-checks .material-symbols-outlined { color: #9fb3ff; }
.syn-fn-list-dark .syn-fn-list-head .material-symbols-outlined { background: var(--syn-accent); color: #ffffff; }
.syn-fn ul.syn-fn-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px !important; }
.syn-fn li.syn-fn-kpi { background: var(--syn-bg-soft); border: 1px solid var(--syn-border); border-radius: 20px; padding: 24px 26px !important; display: flex !important; flex-direction: column; gap: 4px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.syn-fn li.syn-fn-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(65,100,230,0.14); }
.syn-fn-kpi-v { font-family: 'Barlow', Arial, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--syn-accent); }
.syn-fn-kpi-l { font-size: 15px; line-height: 1.5; color: var(--syn-muted); }
.syn-fn-contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; background: var(--syn-navy); border-radius: 30px; padding: 48px; }
.syn-fn-contact .syn-fn-eyebrow { color: #9fb3ff !important; }
.syn-fn h2.syn-fn-contact-title { font-family: 'Barlow', Arial, sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0 0 18px 0; }
.syn-fn-contact p { color: #dfe5fb !important; font-size: 17px; }
.syn-fn a.syn-fn-phone { display: inline-flex; align-items: center; gap: 12px; color: #ffffff !important; text-decoration: none !important; font-family: 'Barlow', Arial, sans-serif; font-size: 28px; font-weight: 700; margin-top: 6px; }
.syn-fn a.syn-fn-phone .material-symbols-outlined { width: 48px; height: 48px; border-radius: 50%; background: var(--syn-accent); font-size: 24px; display: flex; align-items: center; justify-content: center; }
.syn-fn a.syn-fn-phone:hover { color: #c7d3ff !important; }
.syn-fn-form { background: #ffffff; border-radius: 20px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.syn-fn-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--syn-navy); }
.syn-fn-field-full { grid-column: 1 / -1; }
.syn-fn-field input, .syn-fn-field textarea { font: inherit; font-weight: 400; font-size: 15px; color: var(--syn-navy); border: 1px solid var(--syn-border-strong); border-radius: 12px; padding: 10px 14px; background: var(--syn-bg-soft); width: 100%; }
.syn-fn-field textarea { min-height: 96px; resize: vertical; }
.syn-fn-consent { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--syn-muted); }
.syn-fn-consent label { display: flex; align-items: center; gap: 8px; }
.syn-fn-form .syn-fn-btns { grid-column: 1 / -1; }
.syn-fn ul.syn-fn-nav { display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 0 24px 0 !important; }
.syn-fn a.syn-fn-nav-a { display: inline-flex; align-items: center; gap: 8px; background: var(--syn-bg-soft); border: 1px solid var(--syn-border); color: var(--syn-navy) !important; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 30px; text-decoration: none !important; }
.syn-fn a.syn-fn-nav-a .material-symbols-outlined { font-size: 18px; color: var(--syn-accent); }
.syn-fn a.syn-fn-nav-a:hover { background: #ffffff; border-color: var(--syn-border-strong); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(65,100,230,0.12); }
.syn-fn-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.syn-fn-feat { background: #ffffff; border: 1px solid var(--syn-border); border-radius: 30px; padding: 30px 34px; scroll-margin-top: 110px; transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.syn-fn-feat:hover { border-color: var(--syn-border-strong); box-shadow: 0 10px 28px rgba(65,100,230,0.12); }
.syn-fn-feat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.syn-fn-feat-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--syn-bg-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-fn-feat-icon .material-symbols-outlined { font-size: 26px; color: var(--syn-accent); }
.syn-fn-feat p { color: var(--syn-muted); }
.syn-fn-feat p:last-child { margin-bottom: 0; }
.syn-fn-feat ul.syn-fn-checks { margin-top: 4px !important; }
.syn-fn a.syn-fn-more { display: inline-flex; align-items: center; gap: 6px; color: var(--syn-accent) !important; font-weight: 600; text-decoration: none !important; margin-top: 4px; }
.syn-fn a.syn-fn-more .material-symbols-outlined { font-size: 20px; transition: transform 0.18s; }
.syn-fn a.syn-fn-more:hover .material-symbols-outlined { transform: translateX(4px); }
.syn-fn-ei { margin-top: 20px; }
.syn-fn .syn-fn-ei h3.syn-fn-h3 { margin-bottom: 16px; font-size: 26px; }
.syn-fn-ei-text .syn-fn-btns { margin-top: 26px; }
.syn-fn ol.syn-fn-flow { display: flex !important; align-items: center; justify-content: center; gap: 0; background: #ffffff; border: 1px solid var(--syn-border); border-radius: 20px; padding: 34px 20px !important; }
.syn-fn li.syn-fn-flow-step { display: flex !important; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: 120px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--syn-navy); }
.syn-fn-flow-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--syn-bg-tint); border: 1px solid var(--syn-border-strong); display: flex; align-items: center; justify-content: center; }
.syn-fn-flow-ic .material-symbols-outlined { font-size: 30px; color: var(--syn-accent); }
.syn-fn li.syn-fn-flow-step.is-core .syn-fn-flow-ic { background: var(--syn-accent); border-color: var(--syn-accent); width: 76px; height: 76px; }
.syn-fn li.syn-fn-flow-step.is-core .syn-fn-flow-ic .material-symbols-outlined { color: #ffffff; font-size: 34px; }
.syn-fn li.syn-fn-flow-link { flex: 1; min-width: 30px; position: relative; height: 0; margin-bottom: 34px !important; border-top: 2px dashed var(--syn-border-strong); }
.syn-fn-flow-dot { position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--syn-accent); animation: syn-fn-flowdot 2.4s ease-in-out infinite; }
.syn-fn-flow-dot-rev { animation-direction: reverse; animation-delay: 1.2s; }
@keyframes syn-fn-flowdot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.syn-fn-article { margin-top: 20px; }
.syn-fn ul.syn-fn-mods { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.syn-fn li.syn-fn-mod { display: flex !important; flex-direction: column; gap: 14px; background: var(--syn-bg-soft); border: 1px solid var(--syn-border); border-radius: 30px; padding: 30px 28px !important; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.syn-fn li.syn-fn-mod:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(65,100,230,0.14); }
.syn-fn-mod-icon { width: 52px; height: 52px; border-radius: 50%; background: #ffffff; border: 1px solid var(--syn-border-strong); display: flex; align-items: center; justify-content: center; }
.syn-fn-mod-icon .material-symbols-outlined { font-size: 26px; color: var(--syn-accent); }
.syn-fn h3.syn-fn-mod-name { font-family: 'Barlow', Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--syn-navy); margin: 0; }
.syn-fn-mod p { color: var(--syn-muted); flex: 1; margin: 0; }
.syn-fn-mod .syn-fn-btns { margin-top: 6px; }
.syn-fn-faq { max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .syn-fn *, .syn-fn *::before, .syn-fn *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1024px) {
  .syn-fn h1.syn-fn-h1 { font-size: 44px; }
  .syn-fn ul.syn-fn-mods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .syn-fn-hero, .syn-fn-split, .syn-fn-ei-grid, .syn-fn-contact { grid-template-columns: 1fr; gap: 32px; }
  .syn-fn-lists, .syn-fn-feats { grid-template-columns: 1fr; }
  .syn-fn-section, .syn-fn-hero { margin-bottom: 56px; }
  .syn-fn h2.syn-fn-h2, .syn-fn h2.syn-fn-contact-title { font-size: 30px; }
  .syn-fn-ei, .syn-fn-contact { padding: 36px 28px; }
}
@media (max-width: 600px) {
  .syn-fn h1.syn-fn-h1 { font-size: 34px; }
  .syn-fn h2.syn-fn-h2, .syn-fn h2.syn-fn-contact-title { font-size: 26px; }
  .syn-fn h2.syn-fn-cta-title { font-size: 28px; }
  .syn-fn-lead { font-size: 16px !important; }
  .syn-fn-section, .syn-fn-hero { margin-bottom: 48px; }
  .syn-fn ul.syn-fn-mods, .syn-fn ul.syn-fn-checks { grid-template-columns: 1fr; }
  .syn-fn ul.syn-fn-modes { gap: 10px; }
  .syn-fn li.syn-fn-mode { padding: 14px 12px !important; font-size: 16px; gap: 10px; }
  .syn-fn-mode .material-symbols-outlined { width: 36px; height: 36px; font-size: 20px; }
  .syn-fn ul.syn-fn-kpis { grid-template-columns: 1fr 1fr; }
  .syn-fn ul.syn-fn-nav { display: none !important; }
  .syn-fn-list, .syn-fn-feat { padding: 26px 22px; }
  .syn-fn-ei, .syn-fn-contact { padding: 28px 20px; }
  .syn-fn-form { grid-template-columns: 1fr; padding: 22px; }
  .syn-fn a.syn-fn-phone { font-size: 24px; }
  .syn-fn ol.syn-fn-flow { padding: 26px 10px !important; }
  .syn-fn li.syn-fn-flow-step { width: 86px; font-size: 13px; }
  .syn-fn-flow-ic { width: 52px; height: 52px; }
  .syn-fn li.syn-fn-flow-step.is-core .syn-fn-flow-ic { width: 60px; height: 60px; }
  .syn-fn-article { flex-wrap: wrap; padding: 20px; }
  .syn-fn h3.syn-fn-faq-q { font-size: 18px; }
  .syn-fn-faq-toggle { width: 36px; height: 36px; }
  .syn-fn-cta { padding: 36px 20px; }
  .syn-fn-btns { flex-direction: column; }
  .syn-fn a.syn-fn-btn { justify-content: center; width: 100%; text-align: center; }
}
.syn-fn.syn-fn-rv-on .syn-fn-rv { opacity: 0; transform: translateY(18px); }
.syn-fn.syn-fn-rv-on .syn-fn-rv.syn-fn-rv-x { transform: translateX(24px); }
.syn-fn-cta-mid { margin-bottom: 64px !important; }
.syn-fn-contact-sec { margin-bottom: 0; }
@media (max-width: 900px) { .syn-fn-cta-mid { margin-bottom: 56px !important; } }
@media (max-width: 600px) { .syn-fn-cta-mid { margin-bottom: 48px !important; } }
.syn-fn.syn-fn-rv-on .syn-fn-rv.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease-out var(--rv, 0s), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--rv, 0s); }

.syn-fn-split-text .syn-fn-intro { margin-bottom: 24px !important; }
.syn-fn-photo { margin: 0; border-radius: 30px; overflow: hidden; background: var(--syn-bg-soft); }
.syn-fn img.syn-fn-photo-img, .syn-fn-photo > img { width: 100%; height: 100% !important; aspect-ratio: 3 / 2; object-fit: cover; }
.syn-fn-quote { position: relative; background: var(--syn-bg-soft); border: 1px solid var(--syn-border); border-radius: 30px; padding: 56px 48px 44px 48px; text-align: center; }
.syn-fn-quote-ic { position: absolute; top: -26px; left: 50%; margin-left: -26px; width: 52px; height: 52px; border-radius: 50%; background: var(--syn-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #ffffff; }
.syn-fn-quote-ic .material-symbols-outlined { font-size: 30px; color: #ffffff; }
.syn-fn blockquote.syn-fn-quote-text { margin: 0 auto 20px auto; padding: 0; border: 0; max-width: 820px; quotes: none; background: none; }
.syn-fn blockquote.syn-fn-quote-text::before, .syn-fn blockquote.syn-fn-quote-text::after { content: none; }
.syn-fn blockquote.syn-fn-quote-text p { font-size: 22px; font-weight: 300; line-height: 1.6; color: var(--syn-navy); margin: 0; }
.syn-fn p.syn-fn-quote-author { font-size: 15px; font-weight: 600; color: var(--syn-accent); margin: 0 0 24px 0; }
.syn-fn-quote-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: stretch; }
.syn-fn-quote-photo { margin: 0; border-radius: 30px; overflow: hidden; min-height: 320px; }
.syn-fn-quote-photo img { width: 100%; height: 100% !important; object-fit: cover; }
.syn-fn-quote-side { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 48px 44px 40px 44px; }
.syn-fn-quote-side .syn-fn-quote-ic { left: 44px; margin-left: 0; }
.syn-fn-quote-side .syn-fn-btns-center { justify-content: flex-start; }
.syn-fn-quote-side blockquote.syn-fn-quote-text { margin-left: 0; }
.syn-fn-quote-sig { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 24px 0; }
.syn-fn-quote-side .syn-fn-quote-sig { justify-content: flex-start; }
.syn-fn .syn-fn-quote-sig p.syn-fn-quote-author { margin: 0; }
.syn-fn-quote-logo { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; background: #ffffff; border: 1px solid var(--syn-border); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; }
.syn-fn img.syn-fn-quote-logo-img { width: 100%; height: 100% !important; object-fit: contain; border-radius: 10px; }
@media (max-width: 600px) { .syn-fn-quote-logo { width: 72px; height: 72px; } }
.syn-fn-video { position: relative; aspect-ratio: 16 / 9; max-width: 1000px; margin: 0 auto; border-radius: 30px; overflow: hidden; background: var(--syn-navy); }
.syn-fn-video > img { width: 100%; height: 100% !important; object-fit: cover; }
.syn-fn-video::after { content: ""; position: absolute; inset: 0; background: rgba(30,41,78,0.28); pointer-events: none; transition: background 0.3s; }
.syn-fn-video:hover::after { background: rgba(30,41,78,0.15); }
.syn-fn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.syn-fn-video.is-playing::after { display: none; }
.syn-fn-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 0; background: #ffffff; color: var(--syn-accent); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(255,255,255,0.6); animation: syn-fn-playpulse 2.4s ease-out infinite; transition: transform 0.2s, background 0.2s, color 0.2s; }
.syn-fn-play svg { width: 40px; height: 40px; margin-left: 4px; }
.syn-fn-play:hover { transform: scale(1.06); background: var(--syn-accent); color: #ffffff; }
@keyframes syn-fn-playpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); } 70% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.syn-fn-banner { margin: 20px 0 0 0; border-radius: 30px; overflow: hidden; height: 380px; }
.syn-fn-banner img { width: 100%; height: 100% !important; object-fit: cover; }
.syn-fn-gal-stage { position: relative; background: var(--syn-bg-soft); border-radius: 30px; padding: 28px; }
.syn-fn ul.syn-fn-gal-track { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 20px; }
.syn-fn ul.syn-fn-gal-track::-webkit-scrollbar { display: none; }
.syn-fn li.syn-fn-gal-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex !important; justify-content: center; }
.syn-fn-gal-zoom { border: 0; padding: 0; background: none; cursor: zoom-in; max-width: 760px; width: 100%; }
.syn-fn-gal-zoom img { width: 100%; border-radius: 16px; }
.syn-fn-gal-nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--syn-border-strong); background: #ffffff; color: var(--syn-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(30,41,78,0.12); transition: background 0.2s, color 0.2s; }
.syn-fn-gal-nav:hover { background: var(--syn-accent); color: #ffffff; }
.syn-fn-gal-nav .material-symbols-outlined { font-size: 28px; }
.syn-fn-gal-prev { left: 16px; } .syn-fn-gal-next { right: 16px; }
.syn-fn-gal-count { position: absolute; right: 28px; bottom: 16px; background: var(--syn-navy); color: #ffffff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.syn-fn ul.syn-fn-gal-thumbs { display: flex !important; gap: 12px; margin-top: 16px !important; overflow-x: auto; padding: 4px 2px 6px 2px !important; }
.syn-fn-gal-thumb { width: 120px; flex-shrink: 0; border: 2px solid var(--syn-border); border-radius: 12px; padding: 4px; background: #ffffff; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; }
.syn-fn-gal-thumb img { width: 100%; border-radius: 8px; }
.syn-fn-gal-thumb:hover, .syn-fn-gal-thumb.is-on { opacity: 1; border-color: var(--syn-accent); }
dialog.syn-fn-lb { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); margin: auto; }
dialog.syn-fn-lb::backdrop { background: rgba(30,41,78,0.82); }
dialog.syn-fn-lb img { display: block; max-width: 100%; max-height: 88vh; border-radius: 16px; }
.syn-fn-lb-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #ffffff; color: var(--syn-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.syn-fn-feat-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.syn-fn-feat-wide.is-reverse { grid-template-columns: 1fr 1.15fr; }
.syn-fn-feat-wide.is-reverse .syn-fn-wide-visual { order: -1; }
.syn-fn-feat-wide.no-visual { display: block; }
.syn-fn-feat-wide.no-visual .syn-fn-wide-body { column-count: 2; column-gap: 40px; }
.syn-fn-feat-wide.no-visual.has-list .syn-fn-wide-body { column-count: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
.syn-fn-feat-wide.no-visual.has-list .syn-fn-wide-body > p { grid-column: 1; }
.syn-fn .syn-fn-feat-wide.no-visual.has-list ul.syn-fn-checks { grid-column: 2; grid-row: 1 / span 6; border-top: 0; padding-top: 0 !important; }
.syn-fn-wide-body p:last-child { margin-bottom: 0; }
.syn-fn-wide-visual { margin: 0; background: none; border-radius: 20px; padding: 0; }
.syn-fn-wide-visual img { width: 100%; border-radius: 12px; }
.syn-fn-feat-wide.is-portrait { grid-template-columns: 1.4fr 1fr; }
.syn-fn-feat-wide.is-portrait.is-reverse { grid-template-columns: 1fr 1.4fr; }
.syn-fn-feat-wide.is-portrait .syn-fn-wide-visual { padding: 0; background: none; border-radius: 20px; overflow: hidden; width: 100%; max-width: 440px; justify-self: end; }
.syn-fn-feat-wide.is-portrait.is-reverse .syn-fn-wide-visual { justify-self: start; }
.syn-fn img.syn-fn-portrait-img, .syn-fn-feat-wide.is-portrait .syn-fn-wide-visual img { aspect-ratio: 4 / 5; object-fit: cover; height: 100% !important; border-radius: 20px; }
.syn-fn .syn-fn-feat ul.syn-fn-checks-1 { grid-template-columns: 1fr; }
.syn-fn-docs { margin-top: 32px; }
.syn-fn .syn-fn-docs h3.syn-fn-docs-title { font-size: 22px; margin-bottom: 16px; }
.syn-fn ul.syn-fn-docs-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.syn-fn ul.syn-fn-docs-list.is-single { grid-template-columns: 1fr; }
.syn-fn li.syn-fn-doc { display: flex !important; align-items: center; gap: 16px; background: #ffffff; border: 1px solid var(--syn-border-strong); border-radius: 20px; padding: 16px 18px 16px 18px !important; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.syn-fn li.syn-fn-doc:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(65,100,230,0.14); }
.syn-fn-doc-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--syn-bg-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.syn-fn-doc-ic .material-symbols-outlined { font-size: 24px; color: var(--syn-accent); }
.syn-fn-doc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.syn-fn-doc-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.8px; color: var(--syn-accent); }
.syn-fn-doc-title { font-family: 'Barlow', Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--syn-navy); }
.syn-fn a.syn-fn-doc-dl { position: relative; z-index: 1; overflow: hidden; width: 46px; height: 46px; border-radius: 50%; background: var(--syn-accent); border: 1.5px solid var(--syn-accent); color: #ffffff !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none !important; transition: color 0.3s; }
.syn-fn a.syn-fn-doc-dl::before { content: " "; position: absolute; top: 0; right: 0; left: 0; height: 200%; z-index: -1; background: #f1f3fb; transform: translateY(50%); border-radius: 50%; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.syn-fn a.syn-fn-doc-dl:hover { color: var(--syn-accent) !important; }
.syn-fn a.syn-fn-doc-dl:hover::before { transform: translateY(0); }
@media (max-width: 900px) {
  .syn-fn-feat-wide { grid-template-columns: 1fr; gap: 24px; }
  .syn-fn-feat-wide.is-reverse .syn-fn-wide-visual { order: 0; }
  .syn-fn-feat-wide.no-visual .syn-fn-wide-body, .syn-fn-feat-wide.no-visual.has-list .syn-fn-wide-body { display: block; column-count: 1; }
  .syn-fn .syn-fn-feat-wide.no-visual.has-list ul.syn-fn-checks { border-top: 1px solid var(--syn-border); padding-top: 22px !important; }
  .syn-fn-feat-wide.is-portrait, .syn-fn-feat-wide.is-reverse, .syn-fn-feat-wide.is-portrait.is-reverse { grid-template-columns: 1fr; }
  .syn-fn-feat-wide.is-portrait .syn-fn-wide-visual { max-width: none; order: -1; }
  .syn-fn-feat-wide.is-portrait .syn-fn-wide-visual img { aspect-ratio: 16 / 10; object-position: center 35%; }
  .syn-fn ul.syn-fn-docs-list { grid-template-columns: 1fr; }
  .syn-fn-quote { padding: 48px 28px 36px 28px; }
  .syn-fn-quote-split { grid-template-columns: 1fr; }
  .syn-fn-quote-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .syn-fn-quote-side .syn-fn-quote-ic { left: 28px; }
  .syn-fn-banner { height: 300px; }
}
@media (max-width: 600px) {
  .syn-fn blockquote.syn-fn-quote-text p { font-size: 18px; }
  .syn-fn-gal-stage { padding: 14px; }
  .syn-fn-banner { height: 220px; }
  .syn-fn-video { border-radius: 20px; }
  .syn-fn-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .syn-fn-play svg { width: 30px; height: 30px; }
  .syn-fn-gal-nav { width: 40px; height: 40px; margin-top: -20px; }
  .syn-fn-gal-prev { left: 6px; } .syn-fn-gal-next { right: 6px; }
  .syn-fn-gal-thumb { width: 84px; }
  .syn-fn-gal-count { right: 14px; bottom: 8px; }
}

.syn-fn .syn-fn-hero.syn-fn-hero-band { display: block; position: relative; isolation: isolate; text-align: center; padding: 40px 48px 52px 48px; margin: 0 0 64px 0; }
.syn-fn-hero-band::before { content: ""; position: absolute; inset: 0; background: var(--syn-bg-soft); border-radius: 30px; z-index: -1; }
.syn-fn-hero-band .syn-fn-hero-visual { background: none; padding: 0; border-radius: 0; margin: 0 auto 18px auto; }
.syn-fn-hero-band .syn-fn-picto { max-width: 210px; }
.syn-fn-hero-band .syn-fn-hero-text { max-width: 980px; margin: 0 auto; }
.syn-fn .syn-fn-hero-band h1.syn-fn-h1 { font-size: 52px; }
.syn-fn-hero-band p.syn-fn-lead { margin-left: auto !important; margin-right: auto !important; max-width: 720px; }
.syn-fn-hero-band .syn-fn-btns { justify-content: center; }
@media (max-width: 1024px) { .syn-fn .syn-fn-hero-band h1.syn-fn-h1 { font-size: 44px; } }
@media (max-width: 900px) { .syn-fn .syn-fn-hero.syn-fn-hero-band { padding: 32px 28px 40px 28px; margin-bottom: 56px; } .syn-fn-hero-band .syn-fn-picto { max-width: 180px; } }
@media (max-width: 600px) { .syn-fn .syn-fn-hero.syn-fn-hero-band { padding: 24px 18px 32px 18px; margin-bottom: 48px; } .syn-fn .syn-fn-hero-band h1.syn-fn-h1 { font-size: 32px; } .syn-fn-hero-band .syn-fn-picto { max-width: 150px; } }

.syn-fn-picto { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; overflow: visible; }
.syn-fn-pic { display: none; }
.syn-fn-picto[data-picto="production"] .syn-fn-pic-production,.syn-fn-picto[data-picto="commercial"] .syn-fn-pic-commercial,.syn-fn-picto[data-picto="crm"] .syn-fn-pic-crm,.syn-fn-picto[data-picto="stock"] .syn-fn-pic-stock,.syn-fn-picto[data-picto="wms"] .syn-fn-pic-wms,.syn-fn-picto[data-picto="achats"] .syn-fn-pic-achats,.syn-fn-picto[data-picto="demat"] .syn-fn-pic-demat,.syn-fn-picto[data-picto="facturation"] .syn-fn-pic-facturation,.syn-fn-picto[data-picto="expeditions"] .syn-fn-pic-expeditions,.syn-fn-picto[data-picto="qualite"] .syn-fn-pic-qualite,.syn-fn-picto[data-picto="sav"] .syn-fn-pic-sav,.syn-fn-picto[data-picto="sage"] .syn-fn-pic-sage,.syn-fn-picto[data-picto="bi"] .syn-fn-pic-bi,.syn-fn-picto[data-picto="workflow"] .syn-fn-pic-workflow,.syn-fn-picto[data-picto="affaire"] .syn-fn-pic-affaire,.syn-fn-picto[data-picto="cao"] .syn-fn-pic-cao,.syn-fn-picto[data-picto="synoriel"] .syn-fn-pic-synoriel { display: inline; }
.syn-fn-pk, .syn-fn-recheck { fill: none; stroke: #4164e6; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.syn-fn-pk { stroke-dasharray: 1; stroke-dashoffset: 0; animation: syn-fn-trace 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
.syn-fn-pf { animation: syn-fn-fadein 0.8s ease-out 1.6s both; }
.syn-fn-swing { transform-box: view-box; transform-origin: 150px 150px; animation: syn-fn-swing 3.2s ease-in-out 2.4s infinite; }
.syn-fn-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: syn-fn-spark 2.4s ease-in-out 2.4s infinite; }
.syn-fn-typing { animation: syn-fn-typing 1.2s ease-in-out infinite; }
.syn-fn-bub1 { transform-box: fill-box; transform-origin: 0% 100%; animation: syn-fn-bub 3s ease-in-out 2.4s infinite; }
.syn-fn-bub2 { transform-box: fill-box; transform-origin: 100% 100%; animation: syn-fn-bub 3s ease-in-out 3.9s infinite; }
.syn-fn-slidebox { opacity: 0; animation: syn-fn-slidebox 3.6s ease-out 2.4s infinite; }
.syn-fn-beam { opacity: 0; animation: syn-fn-beam 2.4s ease-in-out 2.4s infinite; }
.syn-fn-key { animation: syn-fn-key 3.6s linear infinite; }
.syn-fn-rock { transform-box: view-box; transform-origin: 200px 118px; animation: syn-fn-rock 3.6s ease-in-out 2.4s infinite; }
.syn-fn-arcloop { fill: none; stroke: #7d97f2; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: syn-fn-recheck 3.6s ease-in-out 2.4s infinite; }
.syn-fn-ext { fill: none; stroke: #c2cdf8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 7; animation: syn-fn-fadein 0.8s ease-out 1.8s both; }
.syn-fn-cote { fill: none; stroke: #4164e6; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: syn-fn-recheck 4s ease-in-out infinite; }
.syn-fn-cross { opacity: 0; animation: syn-fn-cross 6s ease-in-out 2.4s infinite; }
@keyframes syn-fn-cross { 0% { opacity: 0; transform: translate(200px, 104px); } 8%, 92% { opacity: 1; } 0%, 20% { transform: translate(200px, 104px); } 35%, 50% { transform: translate(262px, 199px); } 65%, 80% { transform: translate(138px, 199px); } 100% { opacity: 0; transform: translate(200px, 104px); } }
.syn-fn-pop { transform-box: fill-box; transform-origin: center bottom; animation: syn-fn-pop 2.8s ease-in-out infinite; }
.syn-fn-ring { transform-box: fill-box; transform-origin: center; animation: syn-fn-spin 60s linear infinite; }
.syn-fn-orbit { transform-box: view-box; transform-origin: 200px 200px; animation: syn-fn-spin 40s linear infinite; }
.syn-fn-halo2 { opacity: 0; transform-box: fill-box; transform-origin: center; animation: syn-fn-halo2 3.6s ease-out 2.4s infinite; }
.syn-fn-spin-a { transform-box: fill-box; transform-origin: center; animation: syn-fn-spin 16s linear 2.4s infinite; }
.syn-fn-spin-b { transform-box: fill-box; transform-origin: center; animation: syn-fn-spin 10s linear 2.4s infinite reverse; }
.syn-fn-drop { opacity: 0; animation: syn-fn-drop 2.1s ease-in infinite; }
.syn-fn-cartbob { animation: syn-fn-bob 2.6s ease-in-out 2.4s infinite; }
.syn-fn-item { opacity: 0; animation: syn-fn-item 3s ease-out infinite; }
.syn-fn-float { animation: syn-fn-float 3s ease-in-out 2.4s infinite; }
.syn-fn-pulse { transform-box: fill-box; transform-origin: center; animation: syn-fn-fadein 0.8s ease-out 1.6s both, syn-fn-pulse 2.8s ease-in-out 2.4s infinite; }
.syn-fn-recheck { stroke-dasharray: 1; stroke-dashoffset: 1; animation: syn-fn-recheck 3.2s ease-in-out 1.4s infinite; }
.syn-fn-barf { transform-box: fill-box; transform-origin: bottom; animation: syn-fn-bar 3s ease-in-out infinite; }
.syn-fn-wdot { opacity: 0; animation: syn-fn-wdot 2s ease-in-out 2.4s infinite; }
.syn-fn-road { animation: syn-fn-road 1s linear infinite; }
.syn-fn-truckbob { animation: syn-fn-bob 0.9s ease-in-out 2.4s infinite; }
.syn-fn-wave { opacity: 0; animation: syn-fn-wave 1.8s ease-out infinite; }
.syn-fn-mic { animation: syn-fn-fadein 0.6s ease-out 1.8s both; }
.syn-fn-typel { transform-box: fill-box; transform-origin: left; animation: syn-fn-typel 3.4s ease-in-out infinite; }
.syn-fn-stamp { transform-box: fill-box; transform-origin: center; animation: syn-fn-stamp 3.4s ease-out 2.2s infinite both; }
@keyframes syn-fn-swing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
@keyframes syn-fn-spark { 0%, 100% { opacity: 0; transform: scale(0.4); } 40%, 60% { opacity: 1; transform: scale(1); } }
@keyframes syn-fn-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-9px); opacity: 1; } }
@keyframes syn-fn-bub { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes syn-fn-slidebox { 0% { opacity: 0; transform: translateX(120px); } 20% { opacity: 1; } 45%, 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes syn-fn-beam { 0% { opacity: 0; transform: translateY(0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(176px); } }
@keyframes syn-fn-key { 0%, 14%, 100% { fill: #c2cdf8; } 6% { fill: #4164e6; } }
@keyframes syn-fn-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes syn-fn-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes syn-fn-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes syn-fn-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes syn-fn-spin { to { transform: rotate(360deg); } }
@keyframes syn-fn-halo2 { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes syn-fn-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(230px); } }
@keyframes syn-fn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes syn-fn-item { 0% { opacity: 0; transform: translateY(-60px); } 30%, 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes syn-fn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes syn-fn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes syn-fn-recheck { 0%, 10% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes syn-fn-bar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes syn-fn-wdot { 0% { opacity: 0; transform: translate(0, 0); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes syn-fn-road { to { stroke-dashoffset: 34; } }
@keyframes syn-fn-wave { 0% { opacity: 0; transform: translateX(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }
@keyframes syn-fn-typel { 0% { transform: scaleX(0.1); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0.1); } }
@keyframes syn-fn-stamp { 0%, 30% { opacity: 0; transform: scale(1.6); } 45%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

.syn-fn a.syn-fn-btn-ghost { background: transparent; color: var(--syn-accent) !important; border-color: var(--syn-accent); }
.syn-fn a.syn-fn-btn-ghost::before { background: var(--syn-accent); }
.syn-fn a.syn-fn-btn-ghost:hover { color: #ffffff !important; }
.syn-fn .syn-fn-contact .syn-fn-form a.syn-fn-btn { width: 100%; justify-content: center; }

/* ─── Ajouts propres au gabarit WordPress (absents de la maquette) ─────────── */
.syn-fn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
/* Écart menu → hero de la page : le thème met 50px de marge au contenu de TOUTES les pages ; réduite ici seulement. */
body.syn-fn-on #site-content__inner { margin-top: 20px; }
.syn-fn-wrap .syn-fn-ariane { margin: 0 0 18px 0; font-family: 'Roboto', Arial, sans-serif; font-size: 14px; color: #4a5577; }
.syn-fn-wrap .syn-fn-ariane a { color: #4164e6; text-decoration: none; }
.syn-fn-wrap .syn-fn-ariane a:hover { text-decoration: underline; }
.syn-fn h1.syn-fn-h1-repli { margin: 0 0 48px 0; }

/* Champs WYSIWYG : paragraphes et listes saisis dans l'éditeur. */
.syn-fn div.syn-fn-intro p { font-size: 17px; color: var(--syn-muted); }
.syn-fn div.syn-fn-intro p:last-child, .syn-fn .syn-fn-rich > :last-child { margin-bottom: 0; }
.syn-fn .syn-fn-rich ul:not(.syn-fn-checks), .syn-fn .syn-fn-rich ol { margin: 0 0 16px 0 !important; padding: 0 0 0 1.3em !important; }
.syn-fn .syn-fn-rich ul:not(.syn-fn-checks) > li { list-style: disc !important; margin: 0 0 6px 0 !important; color: var(--syn-muted); }
.syn-fn .syn-fn-rich ol > li { list-style: decimal !important; margin: 0 0 6px 0 !important; color: var(--syn-muted); }
.syn-fn .syn-fn-rich ul:not(.syn-fn-checks) > li::marker, .syn-fn .syn-fn-rich ol > li::marker { content: normal !important; color: var(--syn-accent); }
.syn-fn .syn-fn-rich a { color: var(--syn-accent); text-decoration: underline; text-decoration-color: var(--syn-border-strong); text-underline-offset: 3px; font-weight: 500; }
.syn-fn .syn-fn-rich a:hover { text-decoration-color: var(--syn-accent); }
.syn-fn .syn-fn-feat .syn-fn-rich + ul.syn-fn-checks { margin-top: 16px !important; }

/* Fonctionnalités : une demi-largeur sans voisine prend toute la largeur. */
.syn-fn-feat.syn-fn-feat-solo { grid-column: 1 / -1; }

/* Listes : une seule liste, ou image à gauche + liste. */
.syn-fn-lists.syn-fn-lists-one { grid-template-columns: 1fr; }
.syn-fn-lists-photo { margin: 0; border-radius: 30px; overflow: hidden; min-height: 300px; background: var(--syn-bg-soft); }
.syn-fn-lists-photo img { width: 100%; height: 100% !important; object-fit: cover; }

/* Réassurance : n éléments, chacun 1/n de la largeur. */
.syn-fn ul.syn-fn-kpis { grid-template-columns: repeat(var(--n, 3), 1fr); margin-top: 0 !important; }

/* Image : bandeau à hauteur réglable (--h), réduite dans la même proportion. */
.syn-fn-section > .syn-fn-banner { margin: 0; height: var(--h, 380px); }

/* Focus module, en section autonome. */
.syn-fn-section > .syn-fn-ei { margin-top: 0; }
.syn-fn .syn-fn-ei h2.syn-fn-h3 { font-family: 'Barlow', Arial, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--syn-navy); margin: 0 0 16px 0; }
.syn-fn-ei-grid.is-text { grid-template-columns: 1fr; }
.syn-fn-flow-ic { color: var(--syn-accent); }
.syn-fn li.syn-fn-flow-step.is-core .syn-fn-flow-ic { color: #ffffff; }
.syn-fn-flow-svg { display: flex; }
.syn-fn-flow-svg svg { display: block; width: 30px; height: 30px; }
.syn-fn li.syn-fn-flow-step.is-core .syn-fn-flow-svg svg { width: 34px; height: 34px; }

/* Aller plus loin, en section autonome. */
.syn-fn-articles .syn-fn-article:first-child { margin-top: 0; }
.syn-fn-article-desc { font-size: 15px; line-height: 1.55; color: var(--syn-muted); margin-top: 2px; }

/* Contact : formulaire du site (shortcode) dans une carte blanche. */
.syn-fn-formbox { background: #ffffff; border-radius: 20px; padding: 28px; color: var(--syn-navy); }
.syn-fn-formbox p { color: var(--syn-navy) !important; font-size: 15px; }
.syn-fn-contact.is-text { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .syn-fn ul.syn-fn-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .syn-fn-lists-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .syn-fn-section > .syn-fn-banner { height: calc(var(--h, 380px) * 0.79); }
}
@media (max-width: 600px) {
  body.syn-fn-on #site-content__inner { margin-top: 12px; }
  .syn-fn-ei-grid > * { min-width: 0; }
  .syn-fn li.syn-fn-flow-step { width: auto; flex: 0 1 84px; min-width: 0; }
  .syn-fn li.syn-fn-flow-link { min-width: 14px; }
  /* Réassurance : une carte par ligne, chiffre à gauche et libellé à droite (en 2 colonnes, le chiffre débordait). */
  .syn-fn ul.syn-fn-kpis { grid-template-columns: 1fr; gap: 12px; }
  .syn-fn li.syn-fn-kpi { flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px !important; }
  .syn-fn-kpi-v { font-size: 30px; flex: 0 0 auto; min-width: 4em; white-space: nowrap; }
  .syn-fn-kpi-l { font-size: 14px; line-height: 1.4; }
  .syn-fn-section > .syn-fn-banner { height: calc(var(--h, 380px) * 0.58); }
  .syn-fn-formbox { padding: 20px; }
}

/* ─── Documents : carte du bloc « Téléchargements » des pages secteurs (syn-mm-dl) ─── */
.syn-fn ul.syn-fn-dl { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; }
.syn-fn ul.syn-fn-dl.is-single { grid-template-columns: 1fr; }
.syn-fn ul.syn-fn-dl > li { display: flex !important; align-items: center; gap: 20px; background: var(--syn-bg-soft); border: 1px solid var(--syn-border); border-radius: 30px; padding: 26px 28px !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.syn-fn ul.syn-fn-dl > li:hover { transform: translateY(-3px); background: #ffffff; box-shadow: 0 10px 24px rgba(65,100,230,0.14); }
.syn-fn-dl-doc { position: relative; flex-shrink: 0; width: 62px; height: 78px; border-radius: 8px 20px 8px 8px; background: #ffffff; border: 1px solid var(--syn-border-strong); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(30,41,78,0.08); }
.syn-fn-dl-doc .material-symbols-outlined { font-size: 32px; color: var(--syn-accent); }
.syn-fn-dl-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.syn-fn-dl-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--syn-accent); }
.syn-fn-dl-title { font-family: 'Barlow', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--syn-navy); margin-bottom: 12px; }
.syn-fn .syn-fn-dl-body a.syn-fn-btn { align-self: flex-start; }
.syn-fn ul.syn-fn-dl > li:hover .syn-fn-dl-doc .material-symbols-outlined { animation: syn-fn-dl 0.9s ease-in-out infinite; }
@keyframes syn-fn-dl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ─── Contact : formulaire Gravity Forms (shortcode), repris de la refonte de la page Contact (syn-ct-duo-form) ─── */
.syn-fn-contact { align-items: start; }
.syn-fn-formbox .gform_wrapper { margin: 0 !important; width: 100% !important; max-width: 100% !important; font-family: 'Roboto', Arial, sans-serif; }
.syn-fn-formbox .gform_wrapper form, .syn-fn-formbox .gform_wrapper .gform_body { width: 100% !important; max-width: 100% !important; }
.syn-fn .syn-fn-formbox .gform_wrapper ul.gform_fields { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; width: 100% !important; }
.syn-fn .syn-fn-formbox .gform_wrapper li.gfield { grid-column: span 2; width: auto !important; }
.syn-fn .syn-fn-formbox .gform_wrapper li.gfield--type-text, .syn-fn .syn-fn-formbox .gform_wrapper li.gfield--type-email, .syn-fn .syn-fn-formbox .gform_wrapper li.gfield--type-phone, .syn-fn .syn-fn-formbox .gform_wrapper li.gfield--type-select { grid-column: span 1; }
.syn-fn .syn-fn-formbox .gform_wrapper li.gform_validation_container { display: none !important; }
.syn-fn-formbox .gform_wrapper li.hidden_label > .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.syn-fn-formbox .gform_wrapper .ginput_container { margin: 0 !important; }
.syn-fn-formbox .gform_wrapper input[type=text], .syn-fn-formbox .gform_wrapper input[type=email], .syn-fn-formbox .gform_wrapper input[type=tel], .syn-fn-formbox .gform_wrapper select, .syn-fn-formbox .gform_wrapper textarea { width: 100% !important; background: var(--syn-bg-soft) !important; border: 1px solid var(--syn-border-strong) !important; border-radius: 14px !important; padding: 13px 16px !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--syn-navy) !important; font-family: inherit; box-shadow: none !important; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; }
.syn-fn-formbox .gform_wrapper textarea { min-height: 140px; height: 140px; resize: vertical; }
.syn-fn-formbox .gform_wrapper input::placeholder, .syn-fn-formbox .gform_wrapper textarea::placeholder { color: var(--syn-muted); opacity: 1; }
.syn-fn-formbox .gform_wrapper input:focus, .syn-fn-formbox .gform_wrapper select:focus, .syn-fn-formbox .gform_wrapper textarea:focus { outline: none; background: #ffffff !important; border-color: var(--syn-accent) !important; box-shadow: 0 0 0 3px rgba(65,100,230,0.15) !important; }
/* Cases à cocher. Le thème parent (app.clean.min.css) masque la vraie case (display: none) et en dessine une sur le
   libellé : label::before = le carré, label::after = la coche. On restyle ces deux pseudo-éléments, et la vraie case
   redevient focalisable (invisible, posée sur le carré) : sinon on ne peut pas la cocher au clavier. */
.syn-fn-formbox .gform_wrapper .ginput_container_consent { position: relative; display: block; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox] { display: block !important; position: absolute !important; left: 0; top: 0; z-index: 1; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; opacity: 0; cursor: pointer; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox] + label { position: relative; display: block; min-height: 22px; padding: 1px 0 0 34px !important; cursor: pointer; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox] + label::before { content: "" !important; left: 0 !important; top: 0 !important; transform: none !important; width: 22px !important; height: 22px !important; border-radius: 7px !important; border: 1.5px solid var(--syn-border-strong) !important; background: var(--syn-bg-soft) !important; transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox] + label::after { content: "" !important; left: 0 !important; top: 0 !important; transform: scale(0.6) !important; width: 22px !important; height: 22px !important; border: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important; opacity: 0 !important; transition: opacity 0.18s, transform 0.18s !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox]:hover + label::before, .syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox] + label:hover::before { border-color: var(--syn-accent) !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox]:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(65,100,230,0.25) !important; border-color: var(--syn-accent) !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox]:checked + label::before { background: var(--syn-accent) !important; border-color: var(--syn-accent) !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox]:checked + label::after { opacity: 1 !important; transform: scale(1) !important; }
.syn-fn-formbox .gform_wrapper .ginput_container_consent input[type=checkbox]:active + label::before { transform: scale(0.92) !important; }
.syn-fn-formbox .gform_wrapper .gfield_error .ginput_container_consent input[type=checkbox] + label::before { border-color: #c0392b !important; }

/* Titre et texte au-dessus du formulaire. */
.syn-fn .syn-fn-formbox p.syn-fn-form-titre { font-family: 'Barlow', Arial, sans-serif; font-size: 26px !important; font-weight: 700; line-height: 1.25; color: var(--syn-navy) !important; margin: 0 0 8px 0; }
.syn-fn .syn-fn-formbox p.syn-fn-form-texte { font-size: 15px !important; line-height: 1.6; color: var(--syn-muted) !important; margin: 0 0 22px 0; }
.syn-fn-formbox .gform_wrapper .gfield_consent_label, .syn-fn-formbox .gform_wrapper .ginput_container_consent label { font-size: 14px !important; line-height: 1.5; color: var(--syn-muted) !important; margin: 0 !important; }
.syn-fn-formbox .gform_wrapper .gfield_consent_label a { color: var(--syn-accent); }
.syn-fn-formbox .gform_wrapper .gfield_required { color: var(--syn-accent); }
.syn-fn-formbox .gform_wrapper .gform_footer { margin: 20px 0 0 0 !important; padding: 0 !important; }
.syn-fn-formbox .gform_wrapper .gform_footer input[type=submit], .syn-fn-formbox .gform_wrapper .gform_footer button { background: var(--syn-accent) !important; color: #ffffff !important; border: 1.5px solid var(--syn-accent) !important; border-radius: 24px !important; padding: 12px 34px !important; font-size: 16px !important; font-weight: 500; line-height: 1.2 !important; cursor: pointer; transition: background 0.25s, color 0.25s; width: auto !important; min-width: 0 !important; height: auto !important; }
.syn-fn-formbox .gform_wrapper .gform_footer input[type=submit]:hover, .syn-fn-formbox .gform_wrapper .gform_footer button:hover { background: #f1f3fb !important; color: var(--syn-accent) !important; }
.syn-fn-formbox .gform_wrapper .validation_message, .syn-fn-formbox .gform_wrapper .gform_validation_errors { font-size: 14px; color: #c0392b; }
.syn-fn-formbox .gform_confirmation_message { font-size: 16px; color: var(--syn-navy); }
/* Formulaire envoyé : le message de confirmation GF remplace le formulaire, l'intro au-dessus ferait doublon. */
.syn-fn .syn-fn-formbox:has(.gform_confirmation_message) p.syn-fn-form-titre,
.syn-fn .syn-fn-formbox:has(.gform_confirmation_message) p.syn-fn-form-texte { display: none; }

/* ─── Contact : les 3 agences, colonne gauche ─── */
.syn-fn-agences { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.16); }
.syn-fn .syn-fn-contact p.syn-fn-agences-titre { font-family: 'Barlow', Arial, sans-serif; font-size: 20px; font-weight: 700; color: #ffffff !important; margin: 0 0 16px 0; }
.syn-fn ul.syn-fn-ag-list { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.syn-fn li.syn-fn-ag { display: flex !important; flex-direction: column; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 16px !important; transition: background 0.18s, border-color 0.18s; }
.syn-fn li.syn-fn-ag:hover { background: rgba(255,255,255,0.1); border-color: rgba(159,179,255,0.5); }
.syn-fn-ag-ville { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: 'Barlow', Arial, sans-serif; font-size: 19px; font-weight: 700; color: #ffffff; }
.syn-fn-ag-ville .material-symbols-outlined { font-size: 20px; color: #9fb3ff; }
.syn-fn-ag-tag { font-family: 'Roboto', Arial, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #ffffff; background: var(--syn-accent); border-radius: 20px; padding: 2px 8px; }
.syn-fn-ag-adr { font-size: 14px; line-height: 1.5; color: #dfe5fb; }
.syn-fn a.syn-fn-ag-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: #c7d3ff !important; font-weight: 600; text-decoration: none !important; }
.syn-fn a.syn-fn-ag-more .material-symbols-outlined { font-size: 20px; transition: transform 0.18s; }
.syn-fn a.syn-fn-ag-more:hover .material-symbols-outlined { transform: translateX(4px); }

@media (max-width: 1100px) { .syn-fn ul.syn-fn-ag-list { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .syn-fn ul.syn-fn-dl { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .syn-fn ul.syn-fn-dl > li { flex-direction: column; align-items: flex-start; padding: 22px !important; }
  .syn-fn .syn-fn-formbox .gform_wrapper ul.gform_fields { grid-template-columns: 1fr; }
  .syn-fn .syn-fn-formbox .gform_wrapper li.gfield { grid-column: span 1 !important; }
}
@media (prefers-reduced-motion: reduce) { .syn-fn ul.syn-fn-dl > li:hover .syn-fn-dl-doc .material-symbols-outlined { animation: none !important; } }

/* Listes, image à gauche : la photo suit la hauteur de la liste au lieu de l'imposer (2026-11-02). */
.syn-fn-lists-photo { position: relative; }
.syn-fn-lists-photo img { position: absolute; inset: 0; }