/* Présentation commune aux pages commerciales et métiers. */
.services-page { color: #233d51; --services-blue: #2b769f; --services-green: #8ab842; }
.services-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.services-page a { text-decoration: none; }
.services-page a:focus-visible, .services-page summary:focus-visible { outline: 3px solid #3485b5; outline-offset: 5px; border-radius: 5px; }
.services-hero { padding: 24px 0 40px; background: linear-gradient(120deg, #f6f9fb, #fff 65%); }
.services-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-bottom: 35px; color: #758593; font-size: 12px; }
.services-breadcrumb a:hover { color: #286f97; }
.services-breadcrumb [aria-current] { color: #435c6d; }
.services-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.services-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #64834c; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.services-eyebrow > span:empty { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #8bb64e; box-shadow: 0 0 0 4px #edf3e7; }
.services-hero h1 { margin: 0 0 23px; color: #1e3a50; font-size: clamp(32px, 3.4vw, 46px); font-weight: 650; line-height: 1.16; letter-spacing: -.035em; }
.services-hero-description { max-width: 540px; margin: 0 0 26px; color: #5b7080; font-size: 16px; line-height: 1.8; }
.services-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.services-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 19px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.5; transition: background-color .18s, border-color .18s; }
.services-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.services-button--primary { background: #86b63e; color: #fff; }
.services-button--primary:hover { background: #759f35; }
.services-button--secondary { background: #fff; color: #355b76; border-color: #d3e0e9; }
.services-button--secondary:hover { background: #eef6fb; border-color: #a9c5d8; }
.services-access { display: flex; flex-wrap: wrap; gap: 10px 17px; list-style: none; padding: 0; margin: 23px 0 0; color: #72838f; font-size: 11px; }
.services-access li { display: inline-flex; align-items: center; gap: 6px; }
.services-access svg { width: 14px; height: 14px; color: #6e9850; }
.services-hero-media { min-width: 0; margin: 0; }
.services-hero-media img { display: block; width: 100%; height: auto; max-height: 490px; object-fit: contain; border: 1px solid #e4ebf0; border-radius: 15px; }
.services-hero-media figcaption { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 11px; color: #7a8b96; font-size: 10px; }
.services-hero-media figcaption a { color: #47718f; }
.negoce-hero-composition { position: relative; isolation: isolate; padding: 32px 25px 48px 12px; }
.negoce-hero-composition::before { content: ''; position: absolute; z-index: -1; inset: 0 0 12px; border: 1px solid #e7eff1; border-radius: 48% 52% 46% 54%; background: linear-gradient(135deg, #edf6fb 10%, #f0f6e9 90%); }
.negoce-laptop { position: relative; display: block; width: 89%; padding: 13px 6px 7px; border: 1px solid #4b5b67; border-radius: 12px 12px 5px 5px; background: #293b47; box-shadow: 0 19px 33px -24px #597183; }
.negoce-laptop-camera { position: absolute; top: 5px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #6c7b85; }
.services-hero-media .negoce-laptop img { width: 100%; height: auto; max-height: none; border: 0; border-radius: 2px; }
.negoce-laptop-base { position: absolute; left: -5%; bottom: -10px; width: 110%; height: 10px; border: 1px solid #b9c6ce; border-radius: 0 0 50% 50% / 0 0 90% 90%; background: linear-gradient(#e6edf1, #c0cdd5); box-shadow: 0 8px 12px -7px #627f90; }
.negoce-laptop-base::after { content: ''; display: block; width: 17%; height: 3px; margin: 0 auto; border-radius: 0 0 4px 4px; background: #a5b5c1; }
.negoce-phone { position: absolute; right: 3px; bottom: 8px; display: block; width: 27%; overflow: hidden; padding: 4px; border: 1px solid #5b6a75; border-radius: 21px; background: #293b47; box-shadow: 0 14px 28px -17px #516c7b; }
.services-hero-media .negoce-phone img { width: 100%; height: auto; max-height: none; border: 0; border-radius: 16px; }
.negoce-hero-media figcaption { margin-top: 14px; }
.facturation-hero-frame { position: relative; display: block; aspect-ratio: 1.2; overflow: hidden; border-radius: 18px; background: #eff7fd; }
.services-hero-media .facturation-hero-frame img { position: absolute; top: 50%; right: 0; display: block; width: 190%; max-width: none; height: auto; max-height: none; border: 0; border-radius: 0; transform: translateY(-50%); }
.chantiers-hero-composition { position: relative; padding: 0 16px 66px 0; }
.services-hero-media .chantiers-hero-photo { width: 100%; height: auto; max-height: none; border: 0; border-radius: 17px; }
.chantiers-hero-screen { position: absolute; right: 0; bottom: 0; display: block; width: 58%; overflow: hidden; border: 5px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 15px 34px -18px #6d8795; }
.chantiers-hero-screen .services-media-label { gap: 6px; padding: 9px 8px; border: 0; font-size: 9px; }
.chantiers-hero-screen .services-media-label svg { width: 11px; height: 11px; }
.services-hero-media .chantiers-hero-screen img { width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; }
.chantiers-hero-media figcaption { margin-top: 17px; }
.services-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 42px; border: 1px solid #dfe8ee; border-radius: 11px; overflow: hidden; background: #fff; }
.services-shortcuts--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.services-shortcuts a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 22px 19px; color: #35576d; font-size: 12px; font-weight: 500; }
.services-shortcuts a + a { border-left: 1px solid #e4ebf0; }
.services-shortcuts a:hover { background: #f1f7fa; }
.services-shortcuts svg { width: 19px; height: 19px; color: #6c9852; flex-shrink: 0; }
.services-shortcuts svg:last-child { width: 13px; height: 13px; margin-left: auto; color: #8ba0ae; }
.services-feature { padding: 76px 0; scroll-margin-top: 104px; background: #fff; }
.services-feature--tinted { background: #f7f9fb; }
.services-feature-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 65px; }
.services-feature-grid--media-left { grid-template-columns: 1.05fr .95fr; }
.services-feature-grid--media-left .services-feature-copy { order: 2; }
.services-feature-grid--media-left .services-feature-media { order: 1; }
.services-eyebrow--number { color: #6b8597; }
.services-eyebrow--number > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #cddaeb; border-radius: 50%; color: #5480a1; font-size: 10px; letter-spacing: 0; }
.services-feature h2, .services-faq h2 { margin: 0 0 20px; color: #233e53; font-size: clamp(25px, 2.35vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.services-feature-description p { margin: 0 0 17px; color: #637583; font-size: 15px; line-height: 1.85; }
.services-text-link { display: inline-flex; align-items: center; gap: 10px; color: #2e779e; font-size: 12px; font-weight: 600; line-height: 1.6; }
.services-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.services-text-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.services-feature-copy .services-text-link { margin-top: 7px; }
.services-feature-media { min-width: 0; margin: 0; }
.services-feature-media > a { display: block; overflow: hidden; border: 1px solid #dce5ec; border-radius: 11px; background: #fff; box-shadow: 0 10px 35px -20px #93a9b8; }
.services-media-label { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #e6edf2; background: #fbfcfd; color: #7c8e9a; font-size: 10px; }
.services-media-label > span { width: 6px; height: 6px; border-radius: 50%; background: #91b75c; }
.services-media-label svg { width: 13px; height: 13px; margin-left: auto; }
.services-feature-media img { display: block; width: 100%; height: auto; }
.services-feature-media figcaption { margin-top: 11px; color: #82929d; text-align: center; font-size: 10px; }
.services-feature-media figcaption span { margin: 0 5px; }
.services-page .home-reviews { border-top: 1px solid #e7eef3; }
.services-faq { padding: 76px 0; }
.services-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 75px; }
.services-faq-intro > p:not(.services-eyebrow) { margin: 0 0 23px; color: #697e8d; font-size: 15px; line-height: 1.8; }
.services-faq-list details { border-bottom: 1px solid #dfe7ee; }
.services-faq-list details:first-child { border-top: 1px solid #dfe7ee; }
.services-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; color: #304c61; font-size: 14px; font-weight: 500; line-height: 1.55; list-style: none; cursor: pointer; }
.services-faq-list summary::-webkit-details-marker { display: none; }
.services-faq-list summary svg { width: 17px; height: 17px; color: #7998ac; flex-shrink: 0; }
.services-faq-list details[open] summary svg { transform: rotate(45deg); }
.services-faq-list details > p { margin: 0; padding: 0 30px 23px 0; color: #657e8e; font-size: 14px; line-height: 1.85; }
.services-conversion { padding: 0 0 75px; }
.services-conversion-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; padding: 46px; border: 1px solid #dbe7d5; border-radius: 15px; background: #f2f7ee; }
.services-conversion h2 { max-width: 600px; margin: 0 0 16px; color: #2f4c3c; font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.services-conversion-panel > div > p:not(.services-eyebrow) { max-width: 620px; margin: 0; color: #6f8073; font-size: 14px; line-height: 1.85; }
.services-conversion-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }
@media (min-width: 769px) and (max-width: 1100px) {
    .services-hero-grid { gap: 30px; }
    .services-actions .services-button { width: 100%; }
    .services-feature-grid, .services-faq-grid { gap: 36px; }
    .services-shortcuts a { padding: 18px 13px; gap: 8px; }
    .services-conversion-panel { grid-template-columns: 1fr; gap: 27px; }
    .services-conversion-actions { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .services-container { width: calc(100% - 40px); }
    .services-hero { padding: 20px 0 30px; }
    .services-breadcrumb { margin-bottom: 28px; font-size: 10px; gap: 8px; }
    .services-hero-grid, .services-feature-grid, .services-faq-grid { grid-template-columns: 1fr; gap: 32px; }
    .services-hero h1 { font-size: 34px; }
    .services-hero-description { font-size: 15px; }
    .services-actions .services-button { width: 100%; }
    .services-access { gap: 10px 13px; font-size: 10px; }
    .services-hero-media { width: min(100%, 440px); margin: 0 auto; }
    .services-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
    .services-shortcuts--five a:last-child { grid-column: 1 / -1; border-left: 0; }
    .services-shortcuts a { padding: 18px 12px; font-size: 11px; gap: 8px; }
    .services-shortcuts a:nth-child(3) { border-left: 0; }
    .services-shortcuts a:nth-child(n+3) { border-top: 1px solid #e4ebf0; }
    .services-shortcuts a > svg:last-child { display: none; }
    .services-feature, .services-faq { padding: 48px 0; }
    .services-feature-grid--media-left .services-feature-copy, .services-feature-grid--media-left .services-feature-media { order: initial; }
    .services-feature h2, .services-faq h2 { font-size: 27px; }
    .services-feature-description p { font-size: 14px; }
    .services-conversion { padding-bottom: 45px; }
    .services-conversion-panel { grid-template-columns: 1fr; padding: 30px 24px; gap: 28px; }
    .services-conversion h2 { font-size: 27px; }
    .services-conversion-actions { align-items: stretch; }
    .services-conversion-actions .services-text-link { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
    .services-page *, .services-page *::before, .services-page *::after { transition: none !important; scroll-behavior: auto !important; }
}