@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); } :root { --color-brand-primary: #E4BC00; --color-brand-primary-strong: #E4BC00; --color-brand-dark: #1B1C1E; --color-brand-light: #E9E4DC; --color-energy: #E9E4DC; --color-ink: #1B1C1E; --color-muted: #605C55; --color-bg: #ffffff; --color-bg-soft: #FAF8F6; --color-line: #EFEBE5; --font-base: 'Poppins', system-ui, -apple-system, sans-serif; --container: 1200px; --pad: clamp(1rem, 3vw, 2rem); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-sm: 0 2px 8px -2px rgba(17, 18, 20,.12); --shadow-lift: 0 14px 36px -12px rgba(17, 18, 20,.22); --shadow-cta: 0 10px 22px -8px rgba(255, 210, 0,.55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-base); color: var(--color-ink); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--color-brand-dark); text-decoration: none; } img, svg { max-width: 100%; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } section { padding: clamp(2.5rem, 6vw, 5rem) 0; } .section-header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; } .section-header__overline, .pricing-leadgen__content__overline { display: inline-block; font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-txt); background: var(--color-brand-light); padding: .3em .8em; border-radius: var(--radius-pill); margin-bottom: .8rem; } .section-header__title { font-size: clamp(1.5rem, 3vw, 2.1rem); } h1, h2, h3 { line-height: 1.15; color: var(--color-brand-dark); font-weight: 700; margin: 0 0 .5em; } p { margin: 0 0 1em; } .btn { --b: var(--color-brand-primary); display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-base); font-weight: 600; font-size: .875rem; padding: .6em 1.25em; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .btn--lg { padding: .72em 1.5em; font-size: .95rem; } .btn--primary { background: var(--color-brand-dark); color: #fff; box-shadow: var(--shadow-cta); } .btn--primary:hover { transform: translateY(-2px); } .btn--outline { background: #fff; color: var(--color-brand-dark); border-color: var(--color-brand-dark); } .btn--outline:hover { background: var(--color-energy); color: var(--color-brand-dark); border-color: var(--color-energy); } .btn .arrow { transition: transform .15s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn--sm { padding: .45em 1em; font-size: .8rem; } .btn--energy { background: var(--color-energy); color: var(--color-brand-dark); } .btn--energy:hover { transform: translateY(-2px); } .btn--outline-w { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn--outline-w:hover { background: #fff; color: var(--color-brand-dark); border-color: #fff; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-sm); } .site-header > .container { max-width: 1320px; } .site-header__inner { display: flex; align-items: center; gap: 1.8rem; min-height: 72px; flex-wrap: nowrap; } .site-header__logo { display: flex; align-items: center; } .site-header__logo img { height: 25.5px; width: auto; } .site-header__nav { display: flex; align-items: center; gap: 1.68rem; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; } .site-header__link, .nav-dropdown__trigger { font: inherit; font-weight: 500; color: var(--color-brand-dark); background: none; border: 0; cursor: pointer; padding: .4em 0; display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; } .site-header__link:hover, .nav-dropdown__trigger:hover { color: var(--acc-txt); } .site-header__actions { display: flex; align-items: center; gap: .96rem; } .nav-dropdown { position: relative; } .nav-dropdown__chevron { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .2s ease; } .nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); } .nav-dropdown__menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding: .5rem; display: none; flex-direction: column; } .nav-dropdown.is-open .nav-dropdown__menu { display: flex; } .nav-dropdown__menu a { padding: .55rem .7rem; border-radius: var(--radius-sm); font-weight: 500; font-size: .92rem; } .nav-dropdown__menu a:hover { background: var(--color-bg-soft); color: var(--acc-txt); } .nav-dropdown__menu-item--featured { background: var(--color-energy); margin-top: .25rem; font-weight: 600; } .site-header__burger { display: none; background: none; border: 0; color: var(--color-brand-dark); cursor: pointer; } .site-header__burger svg { width: 26px; height: 26px; } .mobile-menu { position: fixed; inset: 0; z-index: 100; background: #fff; padding: 1.2rem var(--pad); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .mobile-menu__logo { height: 28px; width: auto; } .mobile-menu__close { background: none; border: 0; cursor: pointer; color: var(--color-brand-dark); } .mobile-menu__nav { display: flex; flex-direction: column; gap: .3rem; } .mobile-menu__group summary { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--color-line); } .mobile-menu__group a, .mobile-menu__link { display: block; padding: .55rem 0 .55rem 1rem; font-weight: 500; } .mobile-menu__link { border-bottom: 1px solid var(--color-line); padding-left: 0; font-weight: 600; } .mobile-menu__cta { margin-top: 1.2rem; justify-content: center; } @media (max-width: 1100px) { .site-header__nav { display: none; } .site-header__burger { display: inline-flex; } .site-header__inner { justify-content: space-between; } } @media (max-width: 640px) { .site-header__cta { display: none; } .site-header__inner { gap: 1rem; } .site-header__logo img { height: 22px; } } .page-service__hero { background: linear-gradient(180deg, var(--color-bg-soft), #fff); } .page-service__hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } .page-service__hero__inner--solo { grid-template-columns: 1fr; max-width: 820px; } .page-service__hero__title { font-size: clamp(1.9rem, 4vw, 3rem); } .page-service__hero__subtitle { font-size: 1.12rem; color: var(--color-muted); max-width: 36ch; } .page-service__hero__bullets { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .7rem; } .page-service__hero__bullets li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; } .page-service__hero__bullets svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--color-energy); color: var(--color-brand-dark); margin-top: 2px; } .page-service__hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } .page-service__hero__form { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 1.5rem; } .page-service__hero__form__title { font-size: 1.2rem; } .page-service__hero__form__subtitle { color: var(--color-muted); font-size: .9rem; margin-bottom: 1rem; } @media (max-width: 900px) { .page-service__hero__inner { grid-template-columns: 1fr; } } .client-logos { padding: 2rem 0 1rem; text-align: center; } .client-logos__label { color: var(--color-muted); } .logos-marquee { overflow: hidden; padding: 1rem 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logos-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; gap: 2.5rem; align-items: center; opacity: .7; animation: logos-scroll 45s linear infinite; } .logos-marquee:hover .logos-marquee__track { animation-play-state: paused; } .logos-marquee__item { flex: 0 0 auto; } .logos-marquee__item img { height: 46px; width: auto; filter: grayscale(1); display: block; } @keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logos-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .logos-marquee { -webkit-mask: none; mask: none; } } .local-map-band__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; } .media-fill { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--color-brand-light) center/cover; display: flex; align-items: center; justify-content: center; color: var(--color-brand-dark); font-weight: 600; box-shadow: var(--shadow-lift); } .media-fill::after { content: attr(data-ph); padding: 1rem; text-align: center; } .local-map-band__stats { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; } .local-map-band__stat__num { display: block; font-size: 1.9rem; font-weight: 700; color: var(--acc-txt); } .local-map-band__stat__label { font-size: .85rem; color: var(--color-muted); } @media (max-width: 900px) { .local-map-band__inner { grid-template-columns: 1fr; } } .local-map-band__more{margin-top:14px;font-weight:600} .local-map-band__more a{color:var(--color-brand-primary,#E4BC00);text-decoration:none} .local-map-band__more a:hover{text-decoration:underline} .cities-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px} .cities-list li{margin:0} .cities-list a{display:inline-block;padding:8px 14px;border:1px solid var(--color-line,#EFEBE5);border-radius:999px;background:var(--color-bg-soft,#FAF8F6);color:var(--color-navy,#1B1C1E);text-decoration:none;font-weight:600;font-size:.95rem;transition:border-color .15s,background .15s} .cities-list a:hover{border-color:var(--color-brand-primary,#E4BC00);background:#fff} .pitch-band { background: var(--color-bg-soft); } .pitch-band__intro { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; } .pitch-band__title { font-size: clamp(1.5rem, 3vw, 2.1rem); } .pitch-band__lead { color: var(--color-muted); } .pitch-band__benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .pitch-band__benefit { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); } .pitch-band__benefit__title { font-size: 1.05rem; } .pitch-band__benefit__desc { color: var(--color-muted); font-size: .92rem; margin: 0; } @media (max-width: 900px) { .pitch-band__benefits { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pitch-band__benefits { grid-template-columns: 1fr; } } .seo-content__inner { max-width: 820px; margin: 0 auto; } .seo-content__h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .seo-content__lead { color: var(--color-muted); font-size: 1.05rem; } .seo-content__h3 { margin-top: 1.8rem; color: var(--acc-txt); } .pricing-leadgen { background: var(--color-brand-dark); color: #fff; } .pricing-leadgen h2, .pricing-leadgen h3 { color: #fff; } .pricing-leadgen__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .pricing-leadgen__content__desc { color: #EDE8E0; } .pricing-leadgen__content__features { list-style: none; padding: 0; display: grid; gap: .6rem; } .pricing-leadgen__content__features li { display: flex; align-items: center; gap: .6rem; } .pricing-leadgen__content__features svg { width: 20px; height: 20px; color: var(--color-energy); flex: 0 0 auto; } .pricing-leadgen__form { background: #fff; border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lift); } .pricing-leadgen__form__title { color: var(--color-brand-dark); } @media (max-width: 900px) { .pricing-leadgen__inner { grid-template-columns: 1fr; } } .sector-cards-grid__header { text-align: center; max-width: 700px; margin: 0 auto 2.5rem; } .sector-cards-grid__title { font-size: clamp(1.5rem, 3vw, 2.1rem); } .sector-cards-grid__subtitle { color: var(--color-muted); } .sector-cards-grid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .sector-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .25s ease; display: flex; flex-direction: column; gap: .4rem; } .sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .sector-card__icon { font-size: 1.8rem; } .sector-card__title { font-size: 1.05rem; margin: 0; } .sector-card__desc { color: var(--color-muted); font-size: .9rem; flex: 1; } .sector-card__arrow { color: var(--acc-txt); font-weight: 600; font-size: .9rem; } .sector-cards-grid__cta { text-align: center; margin-top: 2rem; } @media (max-width: 900px) { .sector-cards-grid__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sector-cards-grid__grid { grid-template-columns: 1fr; } } .robot-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .25s ease; } .robot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .robot-card__media { display: block; aspect-ratio: 4 / 3; background-color: var(--color-brand-dark); background-image: var(--robot-img); background-size: cover; background-position: center; } .robot-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.4rem; } .robot-card__title { font-size: 1.05rem; margin: 0; color: var(--color-brand-dark); } .robot-card__desc { color: var(--color-muted); font-size: .9rem; flex: 1; margin: 0; } .robot-card__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .1rem; } .robot-card__spec { font-size: .72rem; font-weight: 600; color: var(--color-brand-dark); background: var(--color-brand-light); border-radius: 999px; padding: 3px 9px; } .robot-card__arrow { color: var(--acc-txt); font-weight: 600; font-size: .9rem; transition: transform .35s var(--ease-out, ease); } .robot-card:hover .robot-card__arrow { transform: translateX(5px); } .env-card { position: relative; display: block; min-height: 230px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); color: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .25s ease; } .env-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .env-card__media { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, rgba(17, 18, 20,.34) 0%, rgba(17, 18, 20,.5) 38%, rgba(17, 18, 20,.7) 68%, rgba(17, 18, 20,.94) 100%), var(--env-img); background-size: cover; background-position: center; transition: transform .45s var(--ease-out, ease); } .env-card:hover .env-card__media { transform: scale(1.05); } .env-card__robot { position: absolute; top: 14px; right: 14px; z-index: 2; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #fff; border: 3px solid rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(17, 18, 20,.45); } .env-card__robot img { width: 100%; height: 100%; object-fit: cover; display: block; } .env-card__body { position: relative; z-index: 1; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1.1rem 1.2rem 1.2rem; } .env-card__tag { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand-light); } .env-card__title { font-size: 1.28rem; font-weight: 600; line-height: 1.2; margin: 0; color: #fff; text-shadow: 0 1px 10px rgba(17, 18, 20,.5); } .env-card__arrow { font-weight: 600; font-size: .9rem; color: #fff; opacity: .9; transition: transform .35s var(--ease-out, ease); } .env-card:hover .env-card__arrow { transform: translateX(5px); } .sector-hero__inner { max-width: 820px; } .sector-hero__eyebrow { display: inline-block; font-weight: 600; font-size: .85rem; color: var(--acc-txt); background: var(--color-brand-light); padding: .35em .9em; border-radius: var(--radius-pill); margin-bottom: 1rem; } .nettoie__table { max-width: 920px; margin: 0 auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .nettoie__row { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 1rem; padding: 1rem 1.4rem; align-items: center; border-bottom: 1px solid var(--color-line); } .nettoie__row:last-child { border-bottom: 0; } .nettoie__row--head { background: var(--color-brand-dark); color: #fff; font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; } .nettoie__row:not(.nettoie__row--head):nth-child(even) { background: var(--color-bg-soft); } .nettoie__row [role="cell"] strong { color: var(--color-brand-dark); } .stats-bar { background: var(--color-brand-light); } .stats-bar__inner { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 5rem); flex-wrap: wrap; text-align: center; } .stats-bar__num { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--color-brand-dark); } .stats-bar__label { font-size: .9rem; color: var(--color-muted); } .case-study__card { max-width: 920px; margin: 0 auto; background: var(--color-brand-dark); color: #EDE8E0; border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-lift); } .case-study__descriptor { display: inline-block; background: var(--color-energy); color: var(--color-brand-dark); font-weight: 600; font-size: .85rem; padding: .35em .9em; border-radius: var(--radius-pill); margin-bottom: 1.5rem; } .case-study__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .case-study__cols h3 { color: #fff; font-size: 1.05rem; } .case-study__cols p { margin: 0; } @media (max-width: 720px) { .nettoie__row { grid-template-columns: 1fr; gap: .3rem; padding: 1rem 1.2rem; } .nettoie__row--head { display: none; } .nettoie__row [role="cell"]::before { content: attr(data-label) " : "; font-weight: 600; color: var(--acc-txt); } .case-study__cols { grid-template-columns: 1fr; gap: 1.2rem; } } .sect-robots-sec{background:var(--color-bg-soft)} .section-header__lead{max-width:60ch;margin:.6rem auto 0;color:var(--color-muted);font-size:1rem} .sect-robots__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:34px} .robotcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-line);border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .16s ease,box-shadow .2s ease,border-color .16s ease} .robotcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color: var(--acc-txt)} .robotcard__media{aspect-ratio:3/2;background:#111214;overflow:hidden} .robotcard__media img{width:100%;height:100%;object-fit:cover;display:block} .robotcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px} .robotcard__type{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color: var(--acc-txt)} .robotcard__name{font-size:1.5rem;font-weight:800;color:var(--color-ink);line-height:1.05;margin:0} .robotcard__why{font-size:.94rem;color:var(--color-muted);margin:.2rem 0 .4rem} .robotcard__go{margin-top:auto;font-size:.86rem;font-weight:600;color: var(--acc-txt)} .robotcard:hover .robotcard__go{color:var(--color-brand-dark)} .faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: .8rem; } .faq__item { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0 1.2rem; box-shadow: var(--shadow-sm); } .faq__summary { list-style: none; cursor: pointer; font-weight: 600; padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq__summary::-webkit-details-marker { display: none; } .faq__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--acc-txt); transition: transform .2s ease; } .faq__item[open] .faq__icon { transform: rotate(45deg); } .faq__answer { padding-bottom: 1.1rem; color: var(--color-muted); } .faq__answer a { color: var(--acc-txt); font-weight: 600; } .fq .em { font-style: normal; color: var(--acc-txt); font-weight: 600; } .fq-hero { position: relative; background: var(--color-brand-dark); color: #EDE8E0; padding: 84px 0 64px; overflow: hidden; text-align: center; } .fq-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 30%, rgba(255, 210, 0,.16), transparent 48%); z-index: 0; } .fq-hero .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .fq-hero .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-txt); margin-bottom: 14px; display: block; } .fq-hero h1 { font-size: clamp(32px,4.4vw,52px); color: #fff; font-weight: 800; line-height: 1.05; margin: 0 0 14px; } .fq-hero p { font-size: 17px; color: #EDE8E0; margin: 0 0 26px; } .fq-search { display: flex; background: #fff; border-radius: 14px; padding: 6px; max-width: 520px; margin: 0 auto; box-shadow: 0 12px 30px rgba(5,12,18,.25); } .fq-search input { flex: 1; border: none; font: 400 15px var(--font-base); padding: 12px 16px; background: transparent; color: var(--color-brand-dark); } .fq-search input:focus { outline: none; } .fq-search .si { display: grid; place-items: center; width: 46px; color: #B3ACA1; } .fq-sec { padding: 64px 0 80px; background: #fff; } .fq-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 44px; align-items: start; } .fq-content { min-width: 0; } .fq-nav { position: sticky; top: 84px; } .fq-nav .lab { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #B3ACA1; margin-bottom: 12px; display: block; } .fq-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--color-muted); margin-bottom: 4px; transition: .14s; cursor: pointer; } .fq-nav a:hover { background: var(--color-bg-soft); } .fq-nav a.on { background: var(--color-brand-dark); color: #fff; font-weight: 600; } .fq-nav a .count { font-size: 12px; color: #B3ACA1; } .fq-nav a.on .count { color: #CFC9BF; } .fq-modebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line); } .fq-toggle { display: inline-flex; background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 30px; padding: 4px; } .fq-toggle button { border: none; background: transparent; font: 600 13.5px var(--font-base); color: var(--color-muted); padding: 8px 16px; border-radius: 30px; cursor: pointer; transition: .15s; } .fq-toggle button.on { background: var(--color-brand-dark); color: #fff; } .fq-count { font-size: 13px; color: #B3ACA1; } .fq-count b { color: var(--color-brand-dark); } .fq-content.stars-only .fq-item:not([data-star]) { display: none; } .fq-noresult { display: none; text-align: center; padding: 36px 20px; background: var(--color-bg-soft); border: 1px dashed var(--color-line); border-radius: 14px; margin-top: 6px; } .fq-noresult.show { display: block; } .fq-noresult b { color: var(--color-brand-dark); font-size: 16px; display: block; margin-bottom: 6px; } .fq-noresult p { font-size: 14px; color: var(--color-muted); margin: 0; } .fq-cat { margin-bottom: 40px; scroll-margin-top: 96px; } .fq-cat.hidden { display: none; } .fq-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .fq-cat-head .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--color-brand-light); color: var(--color-brand-dark); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; } .fq-cat-head h3 { font-size: 20px; color: var(--color-brand-dark); font-weight: 700; line-height: 1.1; margin: 0; } .fq-cat-head .desc { font-size: 13px; color: #B3ACA1; font-style: normal; } .fq-item { border: 1px solid var(--color-line); border-radius: 12px; margin-bottom: 10px; background: #fff; transition: .14s; overflow: hidden; } .fq-item.open { border-color: var(--acc-txt); } .fq-item .q { width: 100%; text-align: left; font: 600 15px var(--font-base); color: var(--color-brand-dark); display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 14px; padding: 16px 20px; background: none; border: 0; } .fq-item .q .ic { flex-shrink: 0; font-size: 20px; color: var(--acc-txt); transition: .2s; line-height: 1; } .fq-item.open .q .ic { transform: rotate(45deg); } .fq-item .a { font-size: 14px; color: var(--color-muted); line-height: 1.6; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; } .fq-item.open .a { max-height: 640px; padding: 0 20px 18px; } .fq-item .a strong { color: var(--color-brand-dark); } .fq-item .a a.deep { color: var(--acc-txt); font-weight: 600; } .fq-midcta { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 16px; padding: 24px 26px; display: flex; align-items: center; gap: 20px; margin: 8px 0 36px; } .fq-midcta .mc-ic { font-size: 30px; } .fq-midcta .mc-t { flex: 1; } .fq-midcta .mc-t b { display: block; color: var(--color-brand-dark); font-size: 16px; font-weight: 700; margin-bottom: 2px; } .fq-midcta .mc-t span { font-size: 13.5px; color: var(--color-muted); } .fq-cat .sect-intro { font-size: 14.5px; margin-bottom: 14px; color: var(--color-muted); } .sect-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 6px; } .sect-pill { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--color-line); border-radius: 11px; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--color-brand-dark); transition: .14s; } .sect-pill:hover { border-color: var(--acc-txt); transform: translateY(-2px); } .sect-pill .ar { color: var(--acc-txt); } @media (max-width: 920px) { .fq-layout { grid-template-columns: 1fr; } .fq-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .fq-nav a { margin-bottom: 0; font-size: 13px; padding: 8px 12px; } .fq-nav .lab { width: 100%; } .sect-grid { grid-template-columns: 1fr 1fr; } .fq-midcta { flex-direction: column; text-align: center; gap: 12px; } } @media (max-width: 560px) { .sect-grid { grid-template-columns: 1fr; } } .fq-links{background:var(--color-bg-soft)} .fq-links__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px} .fq-link{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--color-line);border-radius:14px;padding:18px 20px;text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .2s ease} .fq-link:hover{transform:translateY(-2px);border-color: var(--acc-txt);box-shadow:var(--shadow-lift)} .fq-link strong{color:var(--color-ink);font-size:1.05rem} .fq-link span{color:var(--color-muted);font-size:.9rem} .service-cta-final { background: linear-gradient(135deg, var(--color-brand-primary), #E4BC00); color: #fff; text-align: center; } .service-cta-final__title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); } .service-cta-final__subtitle { color: #EDE8E0; max-width: 52ch; margin-inline: auto; } .service-cta-final__ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .service-cta-final .btn--primary { background: #fff; color: var(--color-brand-dark); box-shadow: var(--shadow-lift); } .service-cta-final .btn--outline { background: transparent; border-color: #fff; color: #fff; } .service-cta-final .btn--outline:hover { background: var(--color-energy); color: var(--color-brand-dark); border-color: var(--color-energy); } .doc-cta { padding: clamp(1.4rem, 3vw, 2rem) 0; } .doc-cta__inner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; text-align: left; max-width: 880px; margin-inline: auto; background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.3rem 1.6rem; } .doc-cta__icon { width: 38px; height: 38px; flex: 0 0 auto; color: var(--acc-txt); } .doc-cta__txt { flex: 1; min-width: 220px; } .doc-cta__txt strong { display: block; color: var(--color-brand-dark); font-size: 1.02rem; } .doc-cta__txt span { font-size: .9rem; color: var(--color-muted); } .doc-cta__btn { flex: 0 0 auto; } @media (max-width: 620px) { .doc-cta__inner { justify-content: center; text-align: center; } .doc-cta__btn { width: 100%; justify-content: center; } } .site-footer { background: var(--color-brand-dark); color: #EDE8E0; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; } .site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; } .site-footer__logo { height: 64px; width: auto; margin-bottom: 1rem; } .site-footer__tagline { font-size: .92rem; max-width: 40ch; } .site-footer__call { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.1rem; padding: .6em 1.1em; font: 600 .92rem var(--font-base); color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.5); border-radius: var(--radius-pill); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; text-decoration: none; } .site-footer__call:hover { background: var(--color-energy); color: var(--color-brand-dark); border-color: var(--color-energy); } .site-footer__call svg { width: 18px; height: 18px; flex: 0 0 auto; } .site-footer__call.revealed { font-variant-numeric: tabular-nums; letter-spacing: .01em; } .site-footer__col { display: flex; flex-direction: column; gap: .5rem; } .site-footer__col__title { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; } .site-footer__col a { color: #EDE8E0; font-size: .92rem; } .site-footer__col a:hover { color: var(--acc-txt); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; } .site-footer__legal a { color: #EDE8E0; font-size: .85rem; } .site-footer__legal a:hover { color: var(--acc-txt); } @media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } } .pitch-band__benefits--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .pitch-band__benefits--3 { grid-template-columns: 1fr; } } .photo-break { padding: 0; } .photo-break__media { width: 100%; aspect-ratio: 24 / 7; background: var(--color-brand-dark) center/cover; display: flex; align-items: center; justify-content: center; color: #B3ACA1; font-weight: 600; text-align: center; padding: 1rem; } .guarantees { background: var(--color-brand-dark); color: #EDE8E0; } .guarantees__head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; } .guarantees__head h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); } .guarantees__head p { color: #EDE8E0; } .guarantees__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; } .guarantee { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 1.4rem; } .guarantee__num { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-energy); color: var(--color-brand-dark); font-weight: 700; margin-bottom: .7rem; } .guarantee h3 { color: #fff; font-size: 1rem; } .guarantee p { color: #EDE8E0; font-size: .88rem; margin: 0; } @media (max-width: 900px) { .guarantees__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .guarantees__grid { grid-template-columns: 1fr; } } .manifesto { background: var(--color-energy); text-align: center; } .manifesto__inner { max-width: 820px; margin: 0 auto; } .manifesto__inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); } .manifesto__inner .em { color: var(--acc-txt); } .materiel-link { display: inline-flex; align-items: center; gap: .4em; color: var(--acc-txt); font-weight: 600; margin-top: .5rem; } .materiel-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; } .guarantees--energy { background: var(--color-energy); color: var(--color-brand-dark); } .guarantees--energy .guarantees__head h2 { color: var(--color-brand-dark); } .guarantees--energy .guarantees__head p { color: #605C55; } .guarantees--energy .guarantee { background: #fff; border: 1px solid rgba(27, 28, 30, .08); box-shadow: var(--shadow-lift); } .guarantees--energy .guarantee__num { background: var(--color-brand-dark); color: var(--color-energy); } .guarantees--energy .guarantee h3 { color: var(--color-brand-dark); } .guarantees--energy .guarantee p { color: var(--color-muted); } .guarantees--energy .guarantee:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 22px 48px -20px rgba(27, 28, 30, .38); } .guarantees--energy::before { opacity: .55; background-image: linear-gradient(rgba(27, 28, 30, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 28, 30, .05) 1px, transparent 1px); } .manifesto--quiet { background: var(--color-bg-soft); } .manifesto--quiet .manifesto__inner h2 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); color: var(--color-brand-dark); line-height: 1.3; } .manifesto--quiet .manifesto__inner .em { color: var(--acc-txt); } .conversion { background: linear-gradient(180deg, var(--color-bg-soft), #fff); } .conversion__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .conversion__intro h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } .conversion__lead { font-size: 1.1rem; color: var(--color-muted); } .conversion__note { font-size: .92rem; color: var(--color-muted); margin: .6rem 0 0; padding: .7rem .9rem; background: var(--color-bg-soft); border-radius: var(--radius-sm); } .conversion__note a { color: var(--color-brand-dark); font-weight: 600; } .conversion__points { list-style: none; padding: 0; display: grid; gap: .7rem; margin: 1.5rem 0; } .conversion__points li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; } .conversion__points svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--color-energy); color: var(--color-brand-dark); margin-top: 2px; } .conversion__steps { margin-top: 1.5rem; } .conversion__steps h2 { font-size: 1.1rem; } .conversion__steps ol { padding-left: 1.1rem; color: var(--color-muted); display: grid; gap: .4rem; } .conversion__form { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 1.5rem; position: sticky; top: 90px; } .conversion__form__title { font-size: 1.2rem; } .conversion__form__subtitle { color: var(--color-muted); font-size: .9rem; margin-bottom: 1rem; } @media (max-width: 900px) { .conversion__inner { grid-template-columns: 1fr; } .conversion__form { position: static; } } .conversion__urgent { margin-top: 1.3rem; font-size: .92rem; color: var(--color-muted); display: flex; align-items: center; gap: .5em; flex-wrap: wrap; } .tel-reveal { display: inline-flex; align-items: center; gap: .4em; background: none; border: 0; padding: 0; cursor: pointer; color: var(--acc-txt); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .tel-reveal svg { width: 16px; height: 16px; flex: 0 0 auto; } .tel-reveal:hover { color: var(--color-brand-dark); } .tel-reveal.revealed { text-decoration: none; cursor: default; } .video-loop { position: absolute; inset: 0; display: block; background: var(--vl-poster) center/cover no-repeat; z-index: 0; } .video-loop__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .video-loop__media { display: none; } } .page-service__hero--media { position: relative; overflow: hidden; min-height: clamp(560px, 86vh, 900px); display: flex; align-items: center; } .page-service__hero--media > .container { position: relative; z-index: 3; width: 100%; } .page-service__hero--media .page-service__hero__inner { grid-template-columns: 1fr; max-width: 520px; } .page-service__hero--media .page-service__hero__media { position: absolute; } .page-service__hero--panel .page-service__hero__media { top: 0; right: 0; bottom: 0; width: clamp(360px, 42vw, 560px); } .page-service__hero--panel .page-service__hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--color-bg-soft) 0%, rgba(243, 248, 255, 0) 12%); } .page-service__hero--cwave { background: var(--color-bg-soft); } .page-service__hero--cwave .page-service__hero__media { top: 0; right: 0; bottom: 0; width: clamp(480px, 50vw, 1100px); -webkit-clip-path: url(#heroCwave); clip-path: url(#heroCwave); } .hero-cwave-def { position: absolute; } .page-service__hero__media > .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 901px) and (max-width: 1200px) { .page-service__hero--cwave .page-service__hero__media { width: 50vw; } } .sector-hero.page-service__hero--media { min-height: clamp(520px, 72vh, 760px); } .sector-hero.page-service__hero--media .sector-hero__inner { max-width: 540px; } .page-service__hero--bg .page-service__hero__media { inset: 0; } .page-service__hero--bg .page-service__hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, var(--color-bg-soft) 0%, rgba(243, 248, 255, .94) 28%, rgba(243, 248, 255, .5) 52%, rgba(243, 248, 255, 0) 78%); } @media (max-width: 900px) { .page-service__hero--media { min-height: 0; flex-direction: column-reverse; align-items: stretch; padding: 1.5rem 0 0; } .page-service__hero--media .page-service__hero__inner { max-width: none; } .page-service__hero--media .page-service__hero__media { position: relative; inset: auto; width: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); margin-top: 1.5rem; } .page-service__hero--bg .page-service__hero__media::after, .page-service__hero--panel .page-service__hero__media::after { display: none; } .page-service__hero--cwave .hero-cwave { display: none; } .page-service__hero--cwave .page-service__hero__media { -webkit-clip-path: none; clip-path: none; } } .photo-break__media { position: relative; overflow: hidden; } .media-fill.media-fill--video { position: relative; overflow: hidden; } .manifesto { position: relative; overflow: hidden; } .manifesto__media { position: absolute; inset: 0; } .manifesto__media::after { content: ""; position: absolute; inset: 0; background: rgba(237, 255, 203, .84); z-index: 1; } .manifesto > .container { position: relative; z-index: 2; } .page-service__hero--cwave .video-loop { background-position: 4% center; } .page-service__hero--cwave .video-loop__media { object-position: 4% center; } :root { --ease-out: cubic-bezier(.22, .61, .36, 1); } .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } .stats-bar__num, .local-map-band__stat__num, .js-count { font-variant-numeric: tabular-nums; } .guarantees { position: relative; overflow: hidden; } .guarantees::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(rgba(255, 210, 0, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 210, 0, .06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask: radial-gradient(120% 100% at 72% 0%, #000, transparent 75%); mask: radial-gradient(120% 100% at 72% 0%, #000, transparent 75%); } .guarantees > .container { position: relative; z-index: 1; } .materiel-link .arrow, .sector-card__arrow, .card__link .arrow { transition: transform .3s var(--ease-out); display: inline-block; } .materiel-link:hover .arrow, .sector-card:hover .sector-card__arrow { transform: translateX(5px); } .sector-card { position: relative; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; } .sector-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--color-brand-primary), var(--color-energy)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); } .sector-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: transparent; } .sector-card:hover::before { transform: scaleX(1); } .guarantee { transition: transform .35s var(--ease-out), background .35s; } .guarantee:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .09); } .stats-bar__item { transition: transform .3s var(--ease-out); } .stats-bar__item:hover { transform: translateY(-3px); } .nettoie__row:not(.nettoie__row--head) { transition: background .25s; } .nettoie__row:not(.nettoie__row--head):hover { background: var(--color-brand-light); } .faq__summary { transition: color .2s; } .faq__item:hover .faq__summary { color: var(--acc-txt); } .video-player { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 16 / 9; max-width: 940px; margin-inline: auto; background: var(--color-brand-dark); } .video-player__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; } .video-player__poster { width: 100%; height: 100%; object-fit: cover; display: block; } .video-player__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--acc-txt); display: grid; place-items: center; box-shadow: var(--shadow-lift); transition: transform .3s var(--ease-out), background .3s; } .video-player__play svg { width: 30px; height: 30px; margin-left: 3px; } .video-player__btn:hover .video-player__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; } .video-player__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.3rem; color: #fff; font-weight: 600; text-align: left; background: linear-gradient(transparent, rgba(27, 28, 30, .72)); } .video-player video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .video-player__msg { position: absolute; inset: 0; display: grid; place-items: center; color: #EDE8E0; font-size: .95rem; text-align: center; padding: 2rem; } .steps { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); max-width: 1040px; margin-inline: auto; } .step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; } .step:nth-child(even) .step__media { order: -1; } .step__num { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-energy); color: var(--color-brand-dark); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; } .step__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: .6rem; } .step__text { color: var(--color-muted); } .step__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--color-brand-light); } @media (max-width: 760px) { .step { grid-template-columns: 1fr; gap: 1.2rem; } .step:nth-child(even) .step__media { order: 0; } } .section-header { text-align: center; max-width: 680px; margin: 0 auto 2.6rem; } .section-header__eyebrow { display: inline-block; font-weight: 600; font-size: .85rem; color: var(--acc-txt); background: var(--color-brand-light); padding: .35em .9em; border-radius: var(--radius-pill); margin-bottom: 1rem; } .section-header__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } .section-header__subtitle { color: var(--color-muted); margin-top: .5rem; } .glossaire { max-width: 820px; margin: 0 auto; } .gl-entry { padding: 1.5rem 0; border-bottom: 1px solid var(--color-line); } .gl-entry:last-child { border-bottom: 0; } .gl-entry__term { font-size: 1.2rem; color: var(--color-brand-dark); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; } .gl-entry__tag { font-family: var(--font-base); font-size: .7rem; font-weight: 700; color: var(--acc-txt); background: var(--color-brand-light); border-radius: var(--radius-pill); padding: .15em .7em; } .gl-entry__alt { font-size: .85rem; color: #B3ACA1; font-style: italic; margin-bottom: .5rem; } .gl-entry__def { color: var(--color-muted); max-width: 74ch; } .blog-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2.5rem; box-shadow: var(--shadow-sm); } .blog-featured__media { position: relative; min-height: 300px; overflow: hidden; } .blog-featured__body { padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; } .blog-cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--acc-txt); } .blog-featured__body h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: .6rem 0; line-height: 1.18; } .blog-featured__body p { color: var(--color-muted); margin-bottom: 1rem; } .blog-meta { font-size: .82rem; color: #B3ACA1; margin-bottom: 1.2rem; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .blog-card { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; } .blog-card__media { height: 175px; position: relative; overflow: hidden; } .blog-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .blog-card__body h3 { font-size: 1.05rem; margin: .5rem 0; line-height: 1.25; } .blog-card__body p { color: var(--color-muted); font-size: .88rem; flex: 1; } .blog-card__meta { font-size: .78rem; color: #B3ACA1; margin-top: .8rem; } .blog-article { max-width: 760px; margin: 0 auto; } .blog-article p { margin-bottom: 1.1rem; font-size: 1.05rem; } .blog-article__lead { font-size: 1.2rem; color: var(--color-brand-dark); font-weight: 500; } @media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-featured { grid-template-columns: 1fr; } .blog-featured__media { min-height: 200px; } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } } .robot-keyspecs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin-top: 1.4rem; } .robot-keyspec { display: flex; flex-direction: column; } .robot-keyspec__v { font-size: 1.4rem; font-weight: 700; color: var(--color-brand-dark); } .robot-keyspec__k { font-size: .82rem; color: var(--color-muted); } .atouts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .atout { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.4rem; box-shadow: var(--shadow-sm); } .atout__t { font-size: 1.05rem; color: var(--color-brand-dark); margin-bottom: .4rem; } .atout__d { color: var(--color-muted); font-size: .9rem; } .specs-wrap { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .spec-group { border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .spec-group h3 { background: var(--color-brand-dark); color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; padding: .8rem 1.2rem; } .spec-group__head { background: var(--color-brand-dark); color: #fff; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .8rem 1.2rem; } .spec-line { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--color-line); font-size: .92rem; } .spec-line:last-child { border-bottom: 0; } .spec-line__k { color: var(--color-muted); } .spec-line__v { color: var(--color-brand-dark); font-weight: 600; text-align: right; } .specs-todo { max-width: 720px; margin: 0 auto; text-align: center; color: var(--color-muted); background: var(--color-bg-soft); border: 1px dashed var(--color-line); border-radius: var(--radius-lg); padding: 2rem; } .robot-usages { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .robot-usage { background: var(--color-brand-light); color: var(--color-brand-dark); font-weight: 600; font-size: .9rem; padding: .5em 1em; border-radius: var(--radius-pill); } .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .feature { text-align: left; } .feature__icon { font-size: 1.7rem; } .feature__t { font-size: 1.05rem; color: var(--color-brand-dark); margin: .5rem 0 .3rem; } .feature__d { color: var(--color-muted); font-size: .9rem; } @media (max-width: 900px) { .atouts-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); } .specs-wrap { grid-template-columns: 1fr; } } @media (max-width: 540px) { .atouts-grid, .feature-grid { grid-template-columns: 1fr; } } .legal { max-width: 760px; margin: 0 auto; } .legal__updated { color: var(--color-muted); font-size: .9rem; margin-bottom: 2rem; } .legal h2 { font-size: 1.3rem; color: var(--color-brand-dark); margin: 2.2rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--color-line); } .legal h2:first-of-type { border-top: 0; padding-top: 0; } .legal h3 { font-size: 1.05rem; color: var(--color-brand-dark); margin: 1.4rem 0 .5rem; } .legal p, .legal li { color: var(--color-muted); } .legal p { margin-bottom: 1rem; } .legal ul { margin: 0 0 1rem 1.2rem; display: grid; gap: .4rem; } .legal strong { color: var(--color-brand-dark); } .legal a { color: var(--acc-txt); font-weight: 600; } .legal__toc { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; margin-bottom: 2rem; } .legal__toc ol { margin: .4rem 0 0 1.2rem; columns: 2; gap: 1rem; } .legal__toc a { font-weight: 500; } .legal__notice { background: #F2EEE9; border: 1px solid #EFEBE5; border-radius: var(--radius-md); padding: 1rem 1.2rem; margin-bottom: 2rem; font-size: .9rem; color: #605C55; } .legal__notice strong { color: #605C55; } @media (max-width: 560px) { .legal__toc ol { columns: 1; } } .implant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 820px; margin: 0 auto; } .implant-card { display: block; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s; } .implant-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; } .implant-card__ville { font-size: 1.2rem; color: var(--color-brand-dark); } .implant-card__region { color: var(--color-muted); font-size: .9rem; margin: .2rem 0 .8rem; } .implant-card__arrow { color: var(--acc-txt); font-weight: 600; font-size: .9rem; } @media (max-width: 560px) { .implant-grid { grid-template-columns: 1fr; } } .apropos { max-width: 760px; margin: 0 auto; } .apropos p { font-size: 1.08rem; color: var(--color-muted); margin-bottom: 1.2rem; } .apropos p.lead { font-size: 1.25rem; color: var(--color-brand-dark); font-weight: 500; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .value__t { color: var(--color-brand-dark); font-size: 1.05rem; margin-bottom: .3rem; } .value__d { color: var(--color-muted); font-size: .92rem; } @media (max-width: 700px) { .values-grid { grid-template-columns: 1fr; } } .photo-break__media img, .blog-card__media img, .blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .robot-gallery { display: grid; gap: 1rem; } .robot-showcase { display: grid; gap: 1rem; } .robot-showcase__item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; min-height: 220px; background: var(--color-brand-dark); isolation: isolate; } .robot-showcase__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .robot-showcase__item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 18, 20,0) 45%, rgba(17, 18, 20,.72) 100%); } .robot-showcase__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.2rem; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.25; } .robot-showcase__item:hover img, .robot-showcase__item:focus-within img { transform: scale(1.05); } .robot-showcase--3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; } .robot-showcase--3 .robot-showcase__item:first-child { grid-row: 1 / span 2; min-height: 460px; } .robot-showcase--2 { grid-template-columns: 1fr 1fr; } .robot-showcase--2 .robot-showcase__item { min-height: 320px; } @media (max-width: 760px) { .robot-showcase--3, .robot-showcase--2 { grid-template-columns: 1fr; grid-template-rows: none; } .robot-showcase--3 .robot-showcase__item:first-child { grid-row: auto; min-height: 240px; } } @media (prefers-reduced-motion: reduce) { .robot-showcase__item img { transition: none; } } .robot-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-line); border-radius: var(--radius-lg); } .robot-compare__table { width: 100%; border-collapse: collapse; min-width: 620px; } .robot-compare__table th, .robot-compare__table td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--color-line); vertical-align: middle; } .robot-compare__table tr:last-child th, .robot-compare__table tr:last-child td { border-bottom: 0; } .robot-compare__table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 600; background: var(--color-bg-soft); } .robot-compare__table tbody th { font-weight: 700; color: var(--color-brand-dark); white-space: nowrap; } .robot-compare__table tr.is-current { background: var(--color-energy); } .robot-compare__you { display: inline-block; margin-left: .4rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--acc-txt); vertical-align: middle; } .robot-compare__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .robot-compare__chip { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 30px; padding: .2rem .65rem; font-size: .82rem; font-weight: 500; white-space: nowrap; } .robot-compare__table tr.is-current .robot-compare__chip { background: #fff; border-color: #EFEBE5; } .robot-compare__link { color: var(--acc-txt); font-weight: 600; text-decoration: none; white-space: nowrap; } .robot-compare__link:hover { text-decoration: underline; } .robot-videoband { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--color-brand-dark); } .robot-showcase__item { cursor: zoom-in; } .robot-showcase__zoom { position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; } .robot-showcase__zoom svg { width: 17px; height: 17px; } .robot-showcase__item:hover .robot-showcase__zoom, .robot-showcase__item:focus-visible .robot-showcase__zoom { opacity: 1; transform: scale(1); } .robot-showcase__item:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 2px; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 4vmin; background: rgba(13,29,43,.92); backdrop-filter: blur(6px); animation: lb-in .2s ease; } .lightbox[hidden] { display: none; } @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } } .lightbox__fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; gap: .7rem; align-items: center; } .lightbox__fig img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .lightbox__fig figcaption { color: #EDE8E0; font-size: .95rem; font-weight: 500; text-align: center; } .lightbox__close { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .lightbox__close:hover { background: rgba(255,255,255,.28); } .rf-hero{position:relative;background:var(--color-brand-dark);color:#EDE8E0;overflow:hidden} .rf-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 36%,rgba(255, 210, 0,.20),transparent 52%);z-index:0} .rf-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center;min-height:560px;padding:118px 0 56px} .rf-hero__cat{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color: var(--acc-txt);margin-bottom:14px} .rf-hero__title{font-size:clamp(2.3rem,5vw,4rem);color:#fff;font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-bottom:14px} .rf-hero__tagline{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#EDE8E0;max-width:34ch;margin-bottom:26px} .rf-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px} .rf-hero__stat{display:flex;align-items:baseline;gap:14px} .rf-hero__stat .v{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--color-energy);line-height:1} .rf-hero__stat .k{font-size:.85rem;color:#CFC9BF;max-width:20ch} .rf-hero__media{position:relative;align-self:stretch;min-height:480px} .rf-hero__media img{position:absolute;inset:24px 0;width:100%;height:calc(100% - 48px);object-fit:contain;border-radius:24px} .rf-kfig{background:var(--color-brand-dark);color:#fff;border-top:1px solid rgba(255,255,255,.08)} .rf-kfig__row{display:grid;grid-template-columns:repeat(var(--n,4),1fr)} .rf-kfig__cell{padding:30px 24px;border-left:1px solid rgba(255,255,255,.10)} .rf-kfig__cell:first-child{border-left:none} .rf-kfig__v{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;color:#fff;line-height:1} .rf-kfig__v span{color: var(--acc-txt);font-size:.58em;font-weight:700} .rf-kfig__k{font-size:.8rem;color:#CFC9BF;margin-top:9px;letter-spacing:.02em} .rf-frow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:34px} .rf-frow:last-child{margin-bottom:0} .rf-frow--rev .rf-frow__media{order:2} .rf-frow__media{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#111214} .rf-frow__media img,.rf-frow__media video,.rf-frow__media .video-loop,.rf-frow__media .video-loop video{width:100%;height:100%;object-fit:cover;display:block} .rf-frow__media .video-loop{position:absolute;inset:0} .rf-frow__kick{font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color: var(--acc-txt);margin-bottom:14px;display:block} .rf-frow__t{font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--color-ink);font-weight:700;line-height:1.14;margin-bottom:14px} .rf-frow__d{font-size:1rem;color:var(--color-muted);margin-bottom:14px} .rf-frow__li{list-style:none;display:grid;gap:9px;margin:0;padding:0} .rf-frow__li li{position:relative;padding-left:26px;font-size:.95rem;color:var(--color-ink)} .rf-frow__li li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;border-radius:50%;background:var(--color-energy);border:2px solid var(--color-brand-primary)} .rf-reel{position:relative;max-width:880px;margin:0 auto;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#111214} .rf-reel .video-loop,.rf-reel .video-loop video,.rf-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .rf-procon{display:grid;grid-template-columns:1fr 1fr;gap:18px} .rf-pc{border-radius:20px;padding:30px 28px;border:1px solid var(--color-line);background:#fff} .rf-pc--pro{background:var(--color-brand-dark);color:#EDE8E0;border-color:var(--color-brand-dark)} .rf-pc__tag{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color: var(--acc-txt);margin-bottom:8px} .rf-pc--pro .rf-pc__tag{color:var(--color-energy)} .rf-pc__h{font-size:1.4rem;color:var(--color-ink);font-weight:800;margin-bottom:5px} .rf-pc--pro .rf-pc__h{color:#fff} .rf-pc__sub{font-size:.9rem;color:var(--color-muted);margin-bottom:18px} .rf-pc--pro .rf-pc__sub{color:#CFC9BF} .rf-pc__li{list-style:none;display:grid;gap:10px;margin:0 0 18px;padding:0} .rf-pc__li li{font-size:.92rem;padding-left:22px;position:relative} .rf-pc__li li::before{content:"+";position:absolute;left:0;font-weight:700;color: var(--acc-txt)} .rf-pc--pro .rf-pc__li li::before{color: var(--acc-txt)} @media(max-width:900px){ .rf-hero__grid{grid-template-columns:1fr;min-height:0;padding-top:104px} .rf-hero__media{min-height:300px} .rf-kfig__row{grid-template-columns:1fr 1fr} .rf-kfig__cell:nth-child(-n+2){border-top:none} .rf-kfig__cell{border-left:none;border-top:1px solid rgba(255,255,255,.10)} .rf-frow,.rf-procon{grid-template-columns:1fr;gap:24px} .rf-frow--rev .rf-frow__media{order:0} } .rp-section { padding: clamp(3rem, 7vw, 5.5rem) 0; } .rp-section--soft { background: var(--color-bg-soft); } .accent { color: var(--acc-txt); } .section-header__overline--light { color: var(--color-brand-light); background: rgba(255,255,255,.12); } .hero-stats-inline { margin-top: 1.4rem; font-size: .92rem; color: var(--color-muted); } .hero-stats-inline strong { color: var(--color-brand-dark); } .rp-videoband { padding: clamp(2.5rem, 6vw, 4rem) 0; } .rp-videoband .video-player { max-width: 880px; margin: 0 auto; } .rp-statband { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; max-width: 920px; margin: 0 auto 2.5rem; } .rp-stat { text-align: center; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.4rem 1rem; box-shadow: var(--shadow-sm); } .rp-stat__num { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--color-brand-dark); line-height: 1.1; } .rp-stat__lbl { display: block; margin-top: .4rem; font-size: .85rem; color: var(--color-muted); } .rp-solidgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .rp-solidcard { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); } .rp-solidcard--feature { border-color: var(--color-brand-light); box-shadow: var(--shadow-lift); } .rp-solidcard h3 { color: var(--color-brand-dark); font-size: 1.15rem; margin: .3rem 0 .6rem; } .rp-solidcard p { color: var(--color-muted); margin: 0 0 .6rem; } .rp-eyebrow { display: inline-block; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--acc-txt); } .rp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .2rem; } .rp-chip { font-size: .8rem; font-weight: 600; padding: .35em .8em; border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--color-brand-dark); border: 1px solid var(--color-line); } .rp-chip--clean { background: var(--color-brand-light); border-color: var(--color-brand-light); } .rp-note { font-size: .82rem; color: var(--color-muted); margin-top: .8rem; } .rp-advgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; } .rp-adv { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.6rem 1.3rem; box-shadow: var(--shadow-sm); } .rp-adv__ic { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; background: var(--color-brand-light); color: var(--color-brand-dark); margin-bottom: .9rem; } .rp-adv__ic svg { width: 24px; height: 24px; } .rp-adv h3 { color: var(--color-brand-dark); font-size: 1.02rem; margin: 0 0 .5rem; } .rp-adv p { color: var(--color-muted); margin: 0; font-size: .92rem; } .rp-timeline { list-style: none; counter-reset: tl; max-width: 760px; margin: 0 auto; padding: 0; display: grid; gap: 1rem; } .rp-tl { display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; align-items: start; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); position: relative; } .rp-tl__num { width: 44px; height: 44px; border-radius: 50%; background: var(--color-brand-dark); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; box-shadow: var(--shadow-cta); } .rp-tl h3 { color: var(--color-brand-dark); font-size: 1.05rem; margin: .15rem 0 .4rem; } .rp-tl p { color: var(--color-muted); margin: 0 0 .5rem; font-size: .92rem; } .rp-tl__dur { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--acc-txt); background: var(--color-bg-soft); border: 1px solid var(--color-line); padding: .25em .7em; border-radius: var(--radius-pill); } .rp-daytabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.8rem; } .rp-daytab { font-family: var(--font-base); font-weight: 600; font-size: .92rem; padding: .6em 1.2em; border-radius: var(--radius-pill); border: 1.5px solid var(--color-line); background: #fff; color: var(--color-brand-dark); cursor: pointer; transition: all .15s ease; } .rp-daytab:hover { border-color: var(--acc-txt); } .rp-daytab.is-active { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff; } .rp-daypanel { max-width: 820px; margin: 0 auto; } .rp-daypanel[hidden] { display: none; } .rp-day__lead { font-weight: 600; color: var(--color-brand-dark); text-align: center; margin-bottom: 1.4rem; } .rp-day { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .rp-day li { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); } .rp-day__h { font-weight: 700; color: var(--acc-txt); font-size: .9rem; } .rp-day li span:last-child { color: var(--color-muted); font-size: .92rem; } .rp-day li strong { color: var(--color-brand-dark); } .rp-day--human { border-color: var(--color-brand-light) !important; background: var(--color-brand-light) !important; } .rp-day--human .rp-day__h { color: var(--color-brand-dark); } .rp-kitgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.3rem; } .rp-kit { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .rp-kit h3 { color: var(--color-brand-dark); font-size: 1.08rem; margin: 0 0 .9rem; } .rp-kit ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; } .rp-kit li { position: relative; padding-left: 1.3rem; color: var(--color-muted); font-size: .9rem; } .rp-kit li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-txt); font-weight: 700; } .rp-kit li strong { color: var(--color-brand-dark); } .rp-kit__punch { margin-top: auto; font-weight: 600; color: var(--color-brand-dark); background: var(--color-bg-soft); border-left: 3px solid var(--color-brand-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .7rem .9rem; font-size: .88rem; } .rp-faq { max-width: 820px; margin: 0 auto; } .rp-faq__group + .rp-faq__group { margin-top: 1.8rem; } .rp-faq__cat { color: var(--color-brand-dark); font-size: 1.1rem; margin: 0 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--color-brand-light); } .rp-faq .faq__item { margin-bottom: .7rem; } .rp-roi { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; } .rp-roi__text h2 { color: var(--color-brand-dark); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 .7rem; } .rp-roi__text p { color: var(--color-muted); margin: 0 0 1.4rem; } .rp-roi__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; position: relative; box-shadow: var(--shadow-lift); } .sector-hero--media { position: relative; min-height: clamp(460px, 64vh, 640px); display: flex; align-items: center; overflow: hidden; background: linear-gradient(115deg, var(--color-brand-dark) 0%, #232427 48%, #EDE8E0 100%); } .sector-hero--media .sector-hero__media { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(17, 18, 20,.82), rgba(17, 18, 20,.45) 62%, rgba(17, 18, 20,.25)), var(--sector-img); background-size: cover; background-position: center; z-index: 0; } .sector-hero--media .container { position: relative; z-index: 1; } .sector-hero--media .sector-hero__inner { max-width: 620px; color: #fff; } .sector-hero--media .sector-hero__eyebrow { background: rgba(255,255,255,.16); color: #fff; } .sector-hero__title { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 1rem; } .sector-hero--media .sector-hero__title .accent { color: var(--color-brand-light); } .sector-hero__subtitle { color: rgba(255,255,255,.9); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 56ch; } .sector-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; } .sector-hero--media .btn--primary { background: var(--color-energy); color: var(--color-brand-dark); } .sector-hero--media .btn--outline { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; } .sector-hero--media .btn--outline:hover { background: #fff; color: var(--color-brand-dark); border-color: #fff; } .sector-hero__trust { margin-top: 1.4rem; font-size: .9rem; color: rgba(255,255,255,.88); } .sector-hero__trust strong { color: #fff; } .sector-chapters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; } .sector-chapter { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); } .sector-chapter__klabel { display: inline-block; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--acc-txt); margin-bottom: .6rem; } .sector-chapter h3 { color: var(--color-brand-dark); font-size: 1.15rem; margin: 0 0 .6rem; } .sector-chapter p { color: var(--color-muted); margin: 0; font-size: .95rem; line-height: 1.6; } .sector-chapter__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; } .sector-chapter__list li { position: relative; padding-left: 1.2rem; font-size: .88rem; color: var(--color-brand-dark); } .sector-chapter__list li::before { content: "\2192"; position: absolute; left: 0; color: var(--acc-txt); font-weight: 700; } .briques-sec { background: var(--color-brand-dark); color: #EDE8E0; padding: clamp(3rem, 6vw, 4.5rem) 0; } .briques-head { text-align: center; margin-bottom: 2.2rem; } .briques-head h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: .3rem 0 0; } .briques-head .accent { color: var(--color-brand-light); } .briques { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; } .brique { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 1.3rem 1.1rem; } .brique__n { display: block; font-weight: 700; font-size: .85rem; color: var(--color-brand-light); margin-bottom: .5rem; } .brique h3 { color: #fff; font-size: .98rem; margin: 0 0 .4rem; } .brique p { color: rgba(232,241,251,.78); font-size: .85rem; margin: 0; } .clean-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; margin-bottom: 2.4rem; } .clean-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.3rem 1.2rem; box-shadow: var(--shadow-sm); } .clean-card h3 { color: var(--color-brand-dark); font-size: 1rem; margin: 0 0 .45rem; } .clean-card p { color: var(--color-muted); font-size: .88rem; margin: 0; } .cross { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 2.4rem; } .cross-block { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; } .cross-block h3 { color: var(--color-brand-dark); font-size: 1.1rem; margin: 0 0 .6rem; } .cross-block p { color: var(--color-muted); margin: 0; line-height: 1.65; } .cross-block p strong { color: var(--color-brand-dark); } .matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .matrix-col h3 { color: var(--color-brand-dark); font-size: 1rem; margin: 0 0 .8rem; } .matrix-tags { display: flex; flex-wrap: wrap; gap: .5rem; } .matrix-tags span { font-size: .82rem; font-weight: 600; padding: .35em .85em; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-line); color: var(--color-brand-dark); } .clean-foot { margin-top: 1.8rem; text-align: center; font-size: .92rem; color: var(--color-muted); } .clean-foot__lab { font-weight: 600; color: var(--color-brand-dark); margin-right: .4rem; } .clean-foot a { color: var(--acc-txt); font-weight: 600; text-decoration: none; } .clean-foot a:hover { text-decoration: underline; } .clean-foot__sep { margin: 0 .5rem; color: var(--color-line); } .config-band__inner { max-width: 760px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--color-brand-light); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 2.8rem); box-shadow: var(--shadow-lift); } .config-band__inner h2 { color: var(--color-brand-dark); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .7rem; } .config-band__inner p { color: var(--color-muted); margin: 0 0 1.4rem; } .config-band__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .sectstats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; max-width: 980px; margin: 0 auto 2.4rem; } .sectstat { text-align: center; background: var(--color-brand-light); border-radius: var(--radius-md); padding: 1.3rem 1rem; } .sectstat__v { display: block; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; color: var(--color-brand-dark); line-height: 1.1; } .sectstat__l { display: block; margin-top: .35rem; font-size: .82rem; color: var(--color-brand-dark); opacity: .85; } .cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .case { margin: 0; background: var(--color-brand-dark); color: #EDE8E0; border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-lift); } .case__ctx { display: inline-block; background: var(--color-energy); color: var(--color-brand-dark); font-weight: 600; font-size: .8rem; padding: .35em .9em; border-radius: var(--radius-pill); margin-bottom: 1.2rem; } .case__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.2rem; } .case__n { display: block; font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.1; } .case__t { display: block; font-size: .76rem; color: rgba(232,241,251,.8); margin-top: .2rem; } .case__quote { margin: 0 0 1rem; font-style: italic; color: #fff; line-height: 1.55; } .case__who { font-weight: 600; font-size: .9rem; color: var(--color-brand-light); } .case__who span { display: block; font-weight: 400; font-size: .82rem; color: rgba(232,241,251,.7); } .cases__note { margin-top: 1.4rem; text-align: center; font-size: .78rem; color: var(--color-muted); font-style: italic; } .why-band { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; } .why-band__text h2 { color: var(--color-brand-dark); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .3rem 0 .8rem; } .why-band__text > p { color: var(--color-muted); margin: 0 0 1.2rem; line-height: 1.65; } .why-band__text p strong { color: var(--color-brand-dark); } .why-band__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; } .why-band__list li { position: relative; padding-left: 1.5rem; color: var(--color-brand-dark); font-size: .95rem; } .why-band__list li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-txt); font-weight: 700; } .why-band__ctas { display: flex; flex-wrap: wrap; gap: .8rem; } .why-band__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; position: relative; box-shadow: var(--shadow-lift); } .faqx { max-width: 860px; margin: 0 auto; } .faqx__cat + .faqx__cat { margin-top: 2rem; } .faqx__cattitle { color: var(--color-brand-dark); font-size: 1.12rem; margin: 0 0 .9rem; padding-bottom: .45rem; border-bottom: 2px solid var(--color-brand-light); } .faqx .faq__item { margin-bottom: .7rem; } .maillage__links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 820px; margin: 0 auto; } .maillage__link { display: flex; flex-direction: column; gap: .25rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; color: var(--color-brand-dark); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease; } .maillage__link:hover { border-color: var(--acc-txt); transform: translateY(-2px); } .maillage__region { font-weight: 400; font-size: .82rem; color: var(--color-muted); } @media (max-width: 1000px) { .rp-advgrid { grid-template-columns: 1fr 1fr; } .rp-kitgrid { grid-template-columns: 1fr; } .briques { grid-template-columns: repeat(2, minmax(0,1fr)); } .clean-grid { grid-template-columns: 1fr 1fr; } .sector-chapters { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rp-statband { grid-template-columns: 1fr; } .rp-solidgrid { grid-template-columns: 1fr; } .rp-advgrid { grid-template-columns: 1fr; } .rp-roi { grid-template-columns: 1fr; } .rp-roi__media { order: -1; } .clean-grid { grid-template-columns: 1fr; } .cross { grid-template-columns: 1fr; } .matrix { grid-template-columns: 1fr; } .sectstats { grid-template-columns: 1fr 1fr; } .cases { grid-template-columns: 1fr; } .case__stats { grid-template-columns: repeat(3, 1fr); } .why-band { grid-template-columns: 1fr; } .why-band__media { order: -1; } .briques { grid-template-columns: 1fr; } .maillage__links { grid-template-columns: 1fr; } .rp-day li { grid-template-columns: 1fr; gap: .25rem; } .rp-day__h { font-size: .82rem; } } .proc { margin-top: 2rem; } .proc__num { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-brand-dark); color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; } .proc__step h3 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--color-brand-dark); margin: .1rem 0 .45rem; } .proc__step p { color: var(--color-muted); margin: 0 0 .8rem; } .proc__dur { display: inline-block; font-size: .82rem; font-weight: 600; color: var(--acc-txt); background: var(--color-brand-light); padding: 4px 12px; border-radius: 999px; } .proc__inline { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--color-brand-dark); margin-top: 1rem; } .proc__inline img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 901px) { .proc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .proc__step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; } .proc__inline { display: none; } .proc.is-enhanced .proc__step { opacity: .38; transition: opacity .4s var(--ease-out, ease); } .proc.is-enhanced .proc__step.is-active { opacity: 1; } .proc__stage { position: sticky; top: 12vh; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--color-brand-dark); } .proc__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-out, ease); } .proc__frame.is-active { opacity: 1; } .proc__frame > img, .proc__frame .video-loop { position: absolute; inset: 0; width: 100%; height: 100%; } .proc__frame > img { object-fit: cover; } .proc__frame figcaption { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: 14px 18px; color: #fff; font-weight: 600; background: linear-gradient(0deg, rgba(17, 18, 20,.8), transparent); } .proc__frame figcaption b { color: var(--color-energy); margin-right: .4em; } } @media (max-width: 900px) { .proc__stage { display: none; } .proc__step { margin-bottom: 2.2rem; } } .rp-videoband__media { max-width: 920px; margin: 1.6rem auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: #000; } .rp-videoband__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .rp-roi--banner { display: block; text-align: center; background: var(--color-brand-light); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem); } .rp-roi--banner .rp-roi__text { max-width: 640px; margin: 0 auto; } .rp-roi--banner h2 { margin: .3rem 0 .5rem; } .proc__inline, .proc__stage, .proc__frame, .rp-videoband__media { -webkit-transform: translateZ(0); transform: translateZ(0); } .proc__inline > img, .proc__inline .video-loop, .proc__inline .video-loop__media, .proc__frame, .proc__frame > img, .proc__frame .video-loop, .proc__frame .video-loop__media, .rp-videoband__media video { border-radius: inherit; } .cc .btn-energy { background: var(--color-energy); color: var(--color-brand-dark); padding: .72em 1.5em; font-size: .95rem; border: 2px solid transparent; } .cc .btn-energy:hover { transform: translateY(-2px); } .cc .btn-darkfill { background: var(--color-brand-dark); color: #fff; padding: .6em 1.25em; font-size: .875rem; border: 2px solid transparent; } .cc .btn-darkfill:hover { transform: translateY(-2px); } .cc .btn-outline-d { background: #fff; color: var(--color-brand-dark); border: 2px solid var(--color-brand-dark); padding: .6em 1.25em; font-size: .875rem; } .cc .btn-outline-d:hover { background: #fff; color: var(--color-brand-dark); border-color: var(--color-brand-dark); } .cc .btn-outline-w { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); padding: .6em 1.25em; font-size: .875rem; } .cc .btn-outline-w:hover { background: #fff; color: var(--color-brand-dark); border-color: #fff; } .cc section { position: relative; } .cc .em { font-style: normal; color: var(--acc-txt); font-weight: 600; } .cc-sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; } .cc-sec-head h2 { font-size: clamp(26px,3.2vw,42px); color: var(--color-brand-dark); font-weight: 700; line-height: 1.12; } .cc-sec-head p { margin-top: 12px; font-size: 17px; color: var(--color-muted); } .cc-hero { position: relative; padding: 88px 0 64px; overflow: hidden; background: var(--color-bg-soft); } .cc-hero h1 { font-size: clamp(32px,4.4vw,54px); color: var(--color-brand-dark); font-weight: 800; line-height: 1.06; max-width: 17ch; margin: 0 0 18px; } .cc-hero .sub { font-size: clamp(16px,1.6vw,20px); max-width: 620px; margin: 0 0 24px; color: var(--color-muted); } .cc-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; } .cc-pledge { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-brand-dark); background: #fff; border: 1px solid var(--color-line); border-radius: 30px; padding: 8px 16px; font-weight: 600; } .cc-pledge b { background: var(--color-energy); padding: 2px 9px; border-radius: 20px; font-weight: 700; } .cc-why { background: #fff; padding: 72px 0; } .cc-why-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .cc-why-card { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 26px; min-width: 0; } .cc-why-card .n { font-size: 13px; font-weight: 700; color: var(--acc-txt); margin-bottom: 8px; } .cc-why-card h3 { font-size: 17px; color: var(--color-brand-dark); font-weight: 700; margin: 0 0 8px; line-height: 1.22; } .cc-why-card p { font-size: 14px; color: var(--color-muted); margin: 0; } .cc-config-sec { background: var(--color-bg-soft); padding: 80px 0; } .config { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--color-line); border-radius: 22px; box-shadow: 0 14px 40px rgba(17, 18, 20,.07); overflow: hidden; } .cfg-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--color-line); background: #fff; } .cfg-back { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--font-base); color: var(--color-brand-dark); background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 30px; padding: 6px 13px; cursor: pointer; transition: .14s; } .cfg-back:hover { border-color: var(--acc-txt); color: var(--acc-txt); } .cfg-back[disabled] { opacity: 0; pointer-events: none; } .cfg-progress { flex: 1; height: 6px; background: #EFEBE5; border-radius: 6px; overflow: hidden; } .cfg-progress .bar { height: 100%; background: var(--color-brand-primary); width: 33%; transition: width .25s; border-radius: 6px; } .cfg-stepcount { font-size: 12.5px; font-weight: 700; color: var(--color-brand-dark); white-space: nowrap; } .steps { display: flex; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-line); } .step { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px 10px; font-size: 13.5px; font-weight: 600; color: #B3ACA1; } .step .sx { width: 24px; height: 24px; border-radius: 50%; background: #EFEBE5; color: #B3ACA1; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .step.active { color: var(--color-brand-dark); } .step.active .sx { background: var(--color-brand-dark); color: #fff; } .step.done { color: var(--acc-txt); } .step.done .sx { background: var(--color-brand-dark); color: #fff; } .cfg-body { padding: 30px 34px; } .cfg-step { display: none; } .cfg-step.active { display: block; } .cfg-step > h3 { font-size: 21px; color: var(--color-brand-dark); font-weight: 700; margin: 0 0 4px; } .cfg-step > .hint { font-size: 14px; color: var(--color-muted); margin-bottom: 22px; } .qblock { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; } .qblock:last-of-type { margin-bottom: 0; } .qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .qhead .qn { width: 22px; height: 22px; border-radius: 6px; background: var(--color-brand-dark); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .qhead .qt { font-size: 14.5px; font-weight: 700; color: var(--color-brand-dark); } .qhead .qmeta { margin-left: auto; font-size: 11px; font-weight: 600; color: #B3ACA1; text-transform: uppercase; letter-spacing: .04em; } .opt-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; } .opt { border: 1.5px solid #EFEBE5; background: #fff; border-radius: 10px; padding: 12px 14px; font: 500 13.5px var(--font-base); color: var(--color-brand-dark); cursor: pointer; text-align: left; transition: .14s; min-width: 0; } .opt:hover { border-color: var(--acc-txt); background: var(--color-bg-soft); } .opt.selected { border-color: var(--acc-txt); background: var(--color-brand-light); font-weight: 600; } .qnote { font-size: 12px; color: var(--color-muted); opacity: .85; margin-top: 10px; } .qtextarea { width: 100%; font: 400 14px var(--font-base); padding: 12px 14px; border: 1.5px solid #EFEBE5; border-radius: 10px; background: #fff; resize: vertical; min-height: 74px; } .qtextarea:focus { outline: none; border-color: var(--acc-txt); } .cfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } .field label { font-size: 12.5px; font-weight: 600; color: var(--color-brand-dark); } .field input { font: 400 14px var(--font-base); padding: 12px 14px; border: 1.5px solid #EFEBE5; border-radius: 10px; background: var(--color-bg-soft); } .field input:focus { outline: none; border-color: var(--acc-txt); background: #fff; } .field.full { grid-column: 1/-1; } .cfg-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 38px; border-top: 1px solid var(--color-line); background: var(--color-bg-soft); } .cfg-nav .right { display: flex; gap: 10px; align-items: center; } .cfg-note { font-size: 12.5px; color: var(--color-muted); } .cfg-note a { color: var(--acc-txt); font-weight: 600; } .cfg-result { display: none; padding: 48px 38px; text-align: center; } .cfg-result.active { display: block; } .cfg-result .check { width: 64px; height: 64px; border-radius: 50%; background: var(--color-energy); display: grid; place-items: center; margin: 0 auto 18px; color: var(--color-brand-dark); } .cfg-result h3 { font-size: 24px; color: var(--color-brand-dark); font-weight: 800; margin: 0 0 10px; } .cfg-result p { font-size: 15.5px; color: var(--color-muted); max-width: 460px; margin: 0 auto 6px; } .cfg-result .big { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: var(--color-brand-dark); color: #fff; font-weight: 700; padding: 10px 20px; border-radius: 30px; font-size: 15px; } .cc-est-sec { background: #fff; padding: 80px 0; } .estimator { background: #fff; border: 1px solid var(--color-line); border-radius: 22px; overflow: hidden; } .est-grid { display: grid; grid-template-columns: .95fr 1.05fr; } .est-inputs { padding: 34px 36px; border-right: 1px solid var(--color-line); min-width: 0; } .est-inputs h3 { font-size: 18px; color: var(--color-brand-dark); font-weight: 700; margin: 0 0 4px; } .est-inputs .sm { font-size: 13px; color: var(--color-muted); margin-bottom: 22px; } .ctrl { margin-bottom: 22px; } .ctrl .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .ctrl .top label { font-size: 14px; font-weight: 600; color: var(--color-brand-dark); } .ctrl .top .val { font-size: 15px; font-weight: 700; color: var(--acc-txt); } .ctrl input[type=range] { width: 100%; accent-color: var(--acc-txt); } .cc-note { color: var(--acc-txt); font-weight: 400; } .est-out { padding: 34px 36px; background: var(--color-bg-soft); min-width: 0; } .est-out .lead { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--acc-txt); margin-bottom: 4px; } .est-out .lead-sub { font-size: 13px; color: var(--color-muted); margin-bottom: 16px; } .cols-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .ccol { background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 16px 15px 18px; display: flex; flex-direction: column; position: relative; min-width: 0; } .ccol .opt-badge { position: absolute; top: -9px; left: 14px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; background: #FAF8F6; color: #B3ACA1; border: 1px solid var(--color-line); } .ccol .ct { font-size: 12.5px; font-weight: 700; color: var(--color-brand-dark); margin: 8px 0 10px; line-height: 1.25; min-height: 32px; } .ccol .amount { font-size: 21px; font-weight: 800; color: var(--color-brand-dark); line-height: 1.1; margin-bottom: 8px; } .ccol .amount.soft { font-size: 14px; color: var(--acc-txt); } .ccol ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; } .ccol ul li { font-size: 12px; padding-left: 15px; position: relative; color: var(--color-muted); line-height: 1.4; } .ccol ul li::before { content: "+"; position: absolute; left: 0; color: var(--acc-txt); font-weight: 700; } .ccol.us { background: var(--color-brand-dark); color: #EDE8E0; border-color: var(--color-brand-dark); text-align: center; align-items: center; box-shadow: 0 10px 26px rgba(17, 18, 20,.18); } .ccol.us .opt-badge { background: var(--color-energy); color: var(--color-brand-dark); border-color: var(--color-energy); } .ccol.us .ct { color: var(--color-energy); min-height: 0; margin: 10px 0 14px; } .ccol.us .amount { color: #fff; font-size: 15px; } .ccol.us ul { align-items: flex-start; text-align: left; width: 100%; } .ccol.us ul li { color: #EDE8E0; } .ccol.us ul li::before { content: "\2713"; color: var(--color-energy); } .ccol .tag-us { margin-top: auto; padding-top: 12px; font-size: 12.5px; font-weight: 700; color: #fff; } .save-teaser { margin-top: 18px; background: linear-gradient(120deg, var(--color-brand-dark), #211E1B); border-radius: 18px; padding: 30px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; color: #fff; } .save-teaser .pct { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 6px; } .save-teaser .pct .lock { font-size: 15px; opacity: .6; margin-bottom: 6px; } .save-teaser .pct .save-pct-num { font-size: clamp(64px, 13vw, 104px); font-weight: 800; color: var(--color-energy); letter-spacing: -.03em; line-height: .9; text-shadow: 0 0 26px rgba(237,255,203,.4); } .save-teaser .pct .cap { font-size: 12px; color: #CFC9BF; margin-top: 10px; text-transform: uppercase; letter-spacing: .08em; } .save-teaser .st-txt { max-width: 460px; margin-top: 4px; } .save-teaser .st-txt b { color: #fff; font-size: 17px; font-weight: 700; display: block; margin-bottom: 5px; } .save-teaser .st-txt p { font-size: 13px; color: #EDE8E0; margin: 0; } .save-teaser .st-cta { margin-top: 14px; } .save-teaser .st-icon { display: none; font-size: 30px; margin-bottom: 2px; } .save-teaser.below .pct { display: none; } .save-teaser.below .st-icon { display: block; } .est-disclaimer { font-size: 12.5px; color: var(--color-muted); opacity: .9; margin-top: 16px; text-align: center; } .est-disclaimer a { color: var(--acc-txt); font-weight: 600; } .est-result { background: linear-gradient(120deg, var(--color-brand-dark), #211E1B); border-radius: 18px; padding: 38px 30px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; } .est-result__cap { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #CFC9BF; } .est-result__title { font-size: clamp(1.22rem, 3.2vw, 1.6rem); font-weight: 800; color: #fff; line-height: 1.18; letter-spacing: -.01em; margin: 0 auto .35rem; max-width: 19ch; } .est-result__num { font-size: clamp(40px, 8vw, 64px); font-weight: 800; color: var(--color-energy); line-height: 1; letter-spacing: -.03em; text-shadow: 0 0 22px rgba(237,255,203,.35); display: block; margin: .25rem 0 .35rem; } .est-result__txt { font-size: 14px; color: #EDE8E0; max-width: 440px; margin: 0 auto 4px; line-height: 1.5; } .est-result__txt b { color: #fff; font-weight: 700; } .est-result__cta { margin-top: 18px; } .est-result .est-disclaimer { color: #CFC9BF; opacity: .85; } .est-result .est-disclaimer strong { color: #fff; } .cc-faq-sec { background: var(--color-bg-soft); padding: 76px 0; } .cfaq { max-width: 820px; margin: 0 auto; } .cfaq .faq-item { border: 1px solid var(--color-line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; background: #fff; transition: .15s; } .cfaq .faq-item.open { border-color: var(--acc-txt); } .cfaq .faq-item .q { font-size: 15.5px; color: var(--color-brand-dark); font-weight: 600; display: flex; justify-content: space-between; cursor: pointer; gap: 14px; width: 100%; text-align: left; background: none; border: 0; font-family: var(--font-base); } .cfaq .faq-item .q .ic { flex-shrink: 0; font-size: 18px; color: var(--acc-txt); transition: .2s; } .cfaq .faq-item.open .q .ic { transform: rotate(45deg); } .cfaq .faq-item .a { font-size: 14.5px; margin-top: 12px; display: none; color: var(--color-muted); line-height: 1.65; } .cfaq .faq-item.open .a { display: block; } .cc-final-sec { background: var(--color-brand-dark); color: #EDE8E0; padding: 76px 0; } .cc-final { text-align: center; max-width: 680px; margin: 0 auto; } .cc-final h2 { font-size: clamp(26px,3.4vw,42px); color: #fff; font-weight: 800; line-height: 1.1; margin: 0; } .cc-final h2 .em { color: var(--acc-txt); } .cc-final p { color: #EDE8E0; margin: 16px 0 28px; font-size: 17px; } .cc-final-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 980px) { .cc-why-grid, .est-grid, .cols-3, .cfg-form-grid { grid-template-columns: 1fr; } .est-inputs { border-right: none; border-bottom: 1px solid var(--color-line); } .opt-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .steps .step { font-size: 0; gap: 0; } .steps .step .sx { font-size: 12px; } .cfg-body, .cfg-nav, .est-inputs, .est-out { padding-left: 20px; padding-right: 20px; } .cfg-nav { flex-direction: column-reverse; gap: 12px; align-items: stretch; } .cfg-nav .right { flex-direction: column; align-items: stretch; width: 100%; } .cfg-nav .right .btn, .cfg-nav #cfg-prev { width: 100%; justify-content: center; } .cc-hero-cta { flex-direction: column; align-items: stretch; } .cc-hero-cta .btn { justify-content: center; } .save-teaser .pct .save-pct-num { font-size: clamp(52px, 16vw, 88px); } .save-teaser .st-cta .btn { width: 100%; justify-content: center; } } @media (max-width: 520px) { .opt-grid { grid-template-columns: 1fr 1fr; } .cc-hero h1 { font-size: 30px; } } .gl .em { font-style: normal; color: var(--acc-txt); font-weight: 600; } .gl-hero { position: relative; background: var(--color-brand-dark); color: #EDE8E0; padding: 84px 0 60px; overflow: hidden; text-align: center; } .gl-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 72% 30%, rgba(255, 210, 0,.16), transparent 48%); z-index: 0; } .gl-hero .inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; } .gl-hero .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-txt); margin-bottom: 14px; display: block; } .gl-hero h1 { font-size: clamp(32px,4.4vw,52px); color: #fff; font-weight: 800; line-height: 1.05; margin: 0 0 14px; } .gl-hero p { font-size: 17px; color: #EDE8E0; margin: 0 0 26px; } .gl-search { display: flex; background: #fff; border-radius: 14px; padding: 6px; max-width: 480px; margin: 0 auto; box-shadow: 0 12px 30px rgba(5,12,18,.25); } .gl-search input { flex: 1; border: none; font: 400 15px var(--font-base); padding: 12px 16px; background: transparent; color: var(--color-brand-dark); } .gl-search input:focus { outline: none; } .gl-search .si { display: grid; place-items: center; width: 46px; color: #B3ACA1; } .gl-alpha { position: sticky; top: 64px; z-index: 30; background: #fff; border-bottom: 1px solid var(--color-line); padding: 14px 0; } .gl-alpha .row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .gl-alpha a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--color-brand-dark); background: var(--color-bg-soft); border: 1px solid var(--color-line); transition: .14s; } .gl-alpha a:hover { border-color: var(--acc-txt); color: var(--acc-txt); } .gl-alpha a.empty { color: #EFEBE5; background: transparent; border-color: transparent; pointer-events: none; } .gl-sec { padding: 48px 0 80px; background: #fff; } .gl-group { margin-bottom: 14px; scroll-margin-top: 118px; } .gl-group.hidden { display: none; } .gl-letter { font-size: 26px; font-weight: 800; color: var(--acc-txt); border-bottom: 2px solid var(--color-line); padding-bottom: 8px; margin-bottom: 18px; } .gl-entry { padding: 20px 0; border-bottom: 1px solid var(--color-line); } .gl-entry .term { font-size: 18px; color: var(--color-brand-dark); font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gl-entry .tag-n3 { font-size: 10.5px; font-family: var(--font-base); font-weight: 700; color: var(--acc-txt); background: var(--color-brand-light); border-radius: 20px; padding: 2px 9px; } .gl-entry .alt { font-size: 12.5px; color: #B3ACA1; font-style: italic; margin-bottom: 8px; } .gl-entry .def { font-size: 14.5px; color: var(--color-muted); max-width: 74ch; line-height: 1.6; } .gl-entry .def strong { color: var(--color-brand-dark); } .gl-entry .links { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } .gl-entry .links a { font-size: 12.5px; font-weight: 600; color: var(--color-brand-dark); background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 30px; padding: 6px 13px; transition: .14s; } .gl-entry .links a:hover { border-color: var(--acc-txt); color: var(--acc-txt); } .gl-entry .links .lab { font-size: 12px; color: #B3ACA1; align-self: center; margin-right: 2px; } .gl-noresult { display: none; text-align: center; padding: 40px 20px; background: var(--color-bg-soft); border: 1px dashed var(--color-line); border-radius: 14px; } .gl-noresult.show { display: block; } .gl-noresult b { color: var(--color-brand-dark); font-size: 16px; display: block; margin-bottom: 6px; } .gl-noresult p { font-size: 14px; color: var(--color-muted); margin: 0; } .gl-guide { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 18px; padding: 30px 34px; display: flex; align-items: center; gap: 24px; margin-top: 36px; } .gl-guide .gic { font-size: 34px; } .gl-guide .gt { flex: 1; } .gl-guide .gt b { display: block; color: var(--color-brand-dark); font-size: 18px; font-weight: 700; margin-bottom: 3px; } .gl-guide .gt span { font-size: 14px; color: var(--color-muted); } @media (max-width: 720px) { .gl-guide { flex-direction: column; text-align: center; gap: 14px; } } @media (max-width: 560px) { .gl-alpha a { width: 30px; height: 30px; font-size: 13px; } } .rc-quicknav { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 2.4rem; } .rc-quicknav a { font-size: .82rem; font-weight: 600; color: var(--acc-txt); background: var(--color-brand-light); border-radius: var(--radius-pill); padding: .4em 1.1em; text-decoration: none; transition: background .2s ease, color .2s ease; } .rc-quicknav a:hover { background: var(--color-brand-primary-strong); color: #fff; } .rc-section-head { display: flex; align-items: baseline; gap: .65rem; margin: 0 0 1.2rem; } .rc-section-head:not(:first-child) { margin-top: 2.8rem; } .rc-count { font-size: .78rem; font-weight: 600; color: var(--color-muted); background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: .25em .8em; } .rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .rc-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease; } .rc-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--acc-txt); } .rc-tile__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; font-family: var(--font-base); } .rc-tile--autolaveuse .rc-tile__avatar { background: var(--color-brand-light); color: var(--acc-txt); } .rc-tile--balayeuse .rc-tile__avatar { background: var(--color-energy); color: var(--color-brand-dark); } .rc-tile--aspirateur .rc-tile__avatar { background: var(--color-bg-soft); color: var(--color-brand-dark); border: 1px solid var(--color-line); } .rc-tile__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .rc-tile__modele { font-size: .93rem; font-weight: 600; color: var(--color-brand-dark); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; } .rc-tile__marque { font-size: .76rem; color: var(--color-muted); } .rc-tile__arrow { margin-left: auto; flex: 0 0 auto; color: var(--acc-txt); font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; } .rc-tile:hover .rc-tile__arrow { opacity: 1; transform: translateX(0); } .gl-entry__links{margin-top:.6rem;font-size:.9rem;line-height:1.6} .gl-entry__links-label{font-weight:600;color:var(--color-brand-dark,#1B1C1E);margin-right:.25rem} .gl-entry__links a{color:var(--color-brand-primary,#E4BC00);text-decoration:none;font-weight:500} .gl-entry__links a:hover{text-decoration:underline} .benefices__grid,.temoignages__grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.5rem} .benefice-card{padding:1.5rem;border-radius:16px;background:var(--color-bg-soft,#FAF8F6);box-shadow:0 8px 24px -12px rgba(17, 18, 20,.18)} .benefice-card__icon{width:28px;height:28px;color:var(--color-brand-primary,#E4BC00);background:var(--color-energy-accent,#E9E4DC);border-radius:8px;padding:4px;margin-bottom:.75rem} .benefice-card__title{margin:0 0 .4rem;font-size:1.05rem;color:var(--color-brand-dark,#1B1C1E)} .benefice-card__text{margin:0;font-size:.95rem;line-height:1.55} .temoignage{margin:0;padding:1.5rem;border-radius:16px;background:#fff;border:1px solid var(--color-brand-light,#E9E4DC)} .temoignage__quote{margin:0 0 1rem;font-size:1.05rem;line-height:1.6;color:var(--color-brand-dark,#1B1C1E)} .temoignage__author{display:flex;flex-direction:column;font-size:.85rem} .temoignage__role{font-weight:600;color:var(--color-brand-dark,#1B1C1E)} .temoignage__desc{color:#605C55} .temoignages__note{margin-top:1rem;font-size:.8rem;color:#B3ACA1;font-style:italic} .couverture-geo__list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .couverture-geo__list a{color:var(--color-brand-primary,#E4BC00);text-decoration:none;font-weight:500} .couverture-geo__list a:hover{text-decoration:underline} .blog-article__h2{margin:2rem 0 .75rem;font-size:1.4rem;color:var(--color-brand-dark,#1B1C1E)} .blog-cta-inline{margin:2rem 0;padding:1.5rem;border-radius:16px;background:var(--color-energy-accent,#E9E4DC);text-align:center} .blog-cta-inline p{margin:0 0 .75rem;font-weight:600;color:var(--color-brand-dark,#1B1C1E)} .blog-related{margin-top:3rem;border-top:1px solid var(--color-brand-light,#E9E4DC);padding-top:2rem} .blog-related__title{font-size:1.3rem;color:var(--color-brand-dark,#1B1C1E);margin-bottom:1rem} .blog-links{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--color-line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:.92rem} .blog-links__lab{font-weight:600;color:var(--color-ink)} .blog-links a{color: var(--acc-txt);font-weight:600;text-decoration:none;border-bottom:1px solid transparent} .blog-links a:hover{border-bottom-color:currentColor}

/* ============================================================
   HEADER, traitement repris de welcome.easytoclean.co
   ============================================================ */

/* Au repos : pas d'ombre, le header repose sur sa seule bordure.
   L'ombre n'apparait qu'une fois la page defilee. */
.site-header {
  background: rgba(255, 255, 255, .93);
  box-shadow: none;
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(27, 28, 30, .09);
}

/* Liens de navigation : gris, 15px, la hierarchie remonte vers le CTA */
.site-header__link,
.nav-dropdown__trigger {
  color: var(--color-muted);
  font-size: .9375rem;
  font-weight: 500;
}
.site-header__link:hover,
.nav-dropdown__trigger:hover,
.nav-dropdown.is-open .nav-dropdown__trigger {
  color: var(--acc-txt);
}

/* CTA : contour bleu sur fond blanc, sans halo */
.site-header__cta.btn--primary {
  background: #fff;
  color: var(--acc-txt);
  border-color: var(--acc-txt);
  box-shadow: none;
  padding: .5em 1.15em;
}
.site-header__cta.btn--primary:hover {
  background: #FAF8F6;
  color: var(--acc-txt);
  border-color: var(--acc-txt);
  transform: none;
}
.site-header__cta.btn--primary:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* ============================================================
   HERO CINEMA, video en fond plein cadre
   Reprise de welcome.easytoclean.co (.hero / .herobg / .heroveil)
   S'utilise a la place de .page-service__hero--cwave
   ============================================================ */

.page-service__hero--cinema {
  background: #111214;
}

/* La video occupe tout le cadre au lieu du panneau de droite */
.page-service__hero--cinema .page-service__hero__media {
  inset: 0;
  width: auto;
  -webkit-clip-path: none;
  clip-path: none;
}

/* Voile sombre en degrade horizontal : dense a gauche sous le texte,
   il s'ouvre vers la droite pour laisser respirer l'image */
.page-service__hero--cinema .page-service__hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(13, 13, 15, .93) 0%,
    rgba(13, 13, 15, .72) 46%,
    rgba(13, 13, 15, .38) 100%);
}

/* Colonne de texte : plus large que la version panneau */
.page-service__hero--cinema .page-service__hero__inner {
  max-width: 760px;
}

.page-service__hero--cinema .page-service__hero__title {
  color: #fff;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .4);
}
.page-service__hero--cinema .page-service__hero__subtitle {
  color: #EFEBE5;
  max-width: 54ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.page-service__hero--cinema .page-service__hero__subtitle strong {
  color: #fff;
}
.page-service__hero--cinema .page-service__hero__bullets li {
  color: #FAF8F6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.page-service__hero--cinema .page-service__hero__bullets svg {
  background: var(--color-energy);
  color: var(--color-brand-dark);
}

/* Boutons : le CTA principal passe en vert energie pour ressortir sur le sombre */
.page-service__hero--cinema .btn--primary {
  background: var(--color-energy);
  color: var(--color-brand-dark);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
}
.page-service__hero--cinema .btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.page-service__hero--cinema .btn--outline:hover {
  background: #fff;
  color: var(--color-brand-dark);
  border-color: #fff;
}

/* Mobile : la video reste en fond (elle ne repasse pas en vignette),
   le voile bascule en degrade vertical pour couvrir toute la colonne */
@media (max-width: 900px) {
  .page-service__hero--cinema {
    flex-direction: column;
    align-items: center;
    padding: 0;
    min-height: clamp(520px, 78vh, 720px);
  }
  .page-service__hero--cinema .page-service__hero__media {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
  }
  .page-service__hero--cinema .page-service__hero__media::after {
    display: block;
    background: linear-gradient(180deg,
      rgba(13, 13, 15, .84) 0%,
      rgba(13, 13, 15, .80) 52%,
      rgba(13, 13, 15, .92) 100%);
  }
  .page-service__hero--cinema > .container {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Mouvement reduit : la video est masquee, le poster prend le relais.
   Le voile et le texte blanc restent donc valides. */

/* ============================================================
   ACCENT ROUILLE + ECHELLE DE FONDS
   ============================================================ */

:root {
  /* --- accent --- */
  --acc: #FFD200;         /* fonds sombres */
  --acc-deep: #E4BC00;    /* boutons, texte sur fonds clairs, blanc dessus 5,18:1 */
  --acc-darker: #B89400;  /* survol */
  --acc-wash: #FBF4CE;

  /* --- echelle de fonds, teinte 207 deg comme le reste du site --- */
  --bg-0: #FFFFFF;        /* 100 % */
  --bg-1: #FAF8F6;        /*  96,5 % */
  --bg-2: #FAF8F6;        /*  94,1 % */
  --bg-warm: #F6F4F1;     /*  94,5 %  pierre chaude, echo de la rouille */
}

/* L'ancien bg-soft etait a 98 %, invisible face au blanc. On le recale. */
:root { --color-bg-soft: #FAF8F6; }

/* ------------------------------------------------------------
   1. RYTHME DES SECTIONS
   Aucun palier ne se repete d'une section a la suivante.
   sombre > blanc > N1 > navy > N2 > blanc > pierre > N1 > bleu
   ------------------------------------------------------------ */
.client-logos      { background: var(--bg-0); }
.pitch-band        { background: var(--bg-1); }
.guarantees--energy{ background: var(--bg-2); }
.local-map-band    { background: var(--bg-0); }
.manifesto--quiet  { background: var(--bg-warm); }
.sector-cards-grid { background: var(--bg-1); }

/* La trame de la section garanties suivait le lime : on la repasse en bleu */
.guarantees--energy::before {
  background-image:
    linear-gradient(rgba(27, 28, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 28, 30, .05) 1px, transparent 1px);
}

/* Les cartes posees sur un fond colore doivent rester en blanc pur,
   sinon le palier disparait */
.pitch-band__benefit,
.guarantees--energy .guarantee,
.sector-chapter { background: #fff; }

/* ------------------------------------------------------------
   2. ACCENT, marque l'action et la sequence, jamais la decoration
   ------------------------------------------------------------ */

/* Header */
.site-header__cta.btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
.site-header__cta.btn--primary:hover {
  background: var(--acc-darker);
  color: #fff;
  border-color: transparent;
}

/* Hero : fond sombre, la bordure claire detache le bouton du voile */
.page-service__hero--cinema .page-service__hero__title .ho { color: var(--acc); }
.page-service__hero--cinema .page-service__hero__bullets svg {
  background: var(--acc);
  color: #111214;
}
.page-service__hero--cinema .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: var(--acc);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
}
.page-service__hero--cinema .btn--primary:hover {
  background: var(--acc-darker);
  color: #fff;
}

/* Etiquettes de section */
.section-header__overline,
.pricing-leadgen__content__overline,
.section-header__eyebrow,
.sector-hero__eyebrow,
.rp-eyebrow { background: var(--acc-deep); color: #fff; }

/* Trois engagements : filet de tete */
.pitch-band__benefit { border-top: 3px solid var(--acc-deep); }

/* Bandeau estimation (fond navy) */
.pricing-leadgen__content__features svg { color: var(--acc); }

/* Garanties : numeros de sequence */
.guarantees--energy .guarantee__num { background: var(--acc-deep); color: #fff; }

/* Liens de rebond sur fonds clairs */
.materiel-link,
.sector-card__arrow,
.robot-card__arrow,
.robotcard__go,
.local-map-band__more a,
.manifesto--quiet .manifesto__inner .em,
.manifesto__inner .em,
.local-map-band__stat__num,
.stats-bar__num,
.rp-stat__num { color: var(--acc-txt); }

.sector-card::before { background: linear-gradient(90deg, var(--acc), var(--acc-deep)); }

/* Cartes secteurs : la fleche s'allume au survol, sur photo sombre */
.env-card__arrow { transition: color .25s var(--ease-out, ease), transform .35s var(--ease-out, ease); }
.env-card:hover .env-card__arrow,
.env-card:focus-visible .env-card__arrow { color: var(--acc); opacity: 1; }
.env-card__tag { color: var(--acc); }

/* Boutons sur fonds clairs */
.local-map-band .btn--primary,
.config-band__ctas .btn--primary,
.doc-cta__btn.btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
.local-map-band .btn--primary:hover,
.config-band__ctas .btn--primary:hover,
.doc-cta__btn.btn--primary:hover { background: var(--acc-darker); color: #fff; }

/* CTA final (degrade bleu) */
.service-cta-final .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: var(--acc);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45);
}
.service-cta-final .btn--primary:hover { background: var(--acc-darker); color: #fff; }
.service-cta-final .btn--outline:hover {
  background: #fff;
  color: var(--acc-txt);
  border-color: #fff;
}

/* ============================================================
   SABLE CHAUD, manifeste et bandeau final
   Deux blocs chauds qui encadrent la section secteurs, et un ecart
   de 10,19:1 avec le footer navy la ou le bleu ciel n'en donnait aucun.
   Le gris du site (#605C55) tombe a 4,35:1 sur le sable : on lui substitue
   un secondaire brun. Meme logique pour la rouille, ramenee a #B89400.
   ============================================================ */

:root {
  --sand: #EFE3D5;
  --sand-ink: #2B2825;      /* 12,32:1 sur le sable */
  --sand-muted: #605C55;    /*  5,39:1 */
  --sand-acc: #B89400;      /*  5,78:1, la rouille #E4BC00 n'y fait que 4,10:1 */
}

/* ---------- Manifeste ---------- */
.manifesto--quiet {
  background: var(--sand);
  color: var(--sand-ink);
}
.manifesto--quiet .manifesto__inner h2 {
  color: var(--sand-ink);
}
.manifesto--quiet .manifesto__inner .em {
  color: var(--sand-acc);
}

/* ---------- Bandeau final ---------- */
.service-cta-final {
  background: var(--sand);
  color: var(--sand-ink);
}
.service-cta-final__title {
  color: var(--sand-ink);
}
.service-cta-final__subtitle {
  color: var(--sand-muted);
}
.service-cta-final .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px -14px rgba(46, 33, 26, .45);
}
.service-cta-final .btn--primary:hover {
  background: var(--sand-acc);
  color: #fff;
}
.service-cta-final .btn--outline {
  background: transparent;
  color: var(--sand-ink);
  border-color: var(--sand-ink);
}
.service-cta-final .btn--outline:hover {
  background: var(--sand-ink);
  color: var(--sand);
  border-color: var(--sand-ink);
}

/* ============================================================
   PROPAGATION SITE, retrait du vert lime residuel
   Le lime servait de pseudo-accent sur les gabarits hors accueil.
   Meme regle que sur l'accueil : rouille pour l'action et la sequence,
   lavis chaud pour les blocs de mise en avant.
   ============================================================ */

/* ---------- Boutons et appels a l'action ---------- */
.btn--energy {
  background: var(--acc-deep);
  color: #fff;
}
.btn--energy:hover { background: var(--acc-darker); color: #fff; }

.btn--outline:hover {
  background: var(--acc-wash);
  color: var(--acc-txt);
  border-color: var(--acc-txt);
}

.sector-hero--media .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: var(--acc);
}
.sector-hero--media .btn--primary:hover { background: var(--acc-darker); color: #fff; }

.cc .btn-energy { background: var(--acc-deep); color: #fff; }
.cc .btn-energy:hover { background: var(--acc-darker); color: #fff; }

.site-footer__call:hover {
  background: var(--acc-deep);
  color: #fff;
  border-color: var(--acc-txt);
}

.nav-dropdown__menu-item--featured {
  background: var(--acc-wash);
  color: var(--acc-txt);
}

/* ---------- Marqueurs de sequence ---------- */
.guarantee__num,
.step__num,
.proc__num,
.rp-tl__num {
  background: var(--acc-deep);
  color: #fff;
}
.guarantees .guarantee__num { background: var(--acc); color: #111214; }
.guarantees--energy .guarantee__num { background: var(--acc-deep); color: #fff; }

/* ---------- Puces et coches ---------- */
.page-service__hero__bullets svg,
.conversion__points svg {
  background: var(--acc-deep);
  color: #fff;
}
.page-service__hero--cinema .page-service__hero__bullets svg {
  background: var(--acc);
  color: #111214;
}
.pricing-leadgen__content__features svg { color: var(--acc); }
.rf-frow__li li::before {
  background: var(--acc-wash);
  border-color: var(--acc-txt);
}

/* ---------- Etiquettes de mise en avant ---------- */
.case-study__descriptor,
.case__ctx {
  background: var(--acc);
  color: #111214;
}
.cc-pledge b { background: var(--acc-wash); color: var(--acc-txt); }
.rf-pc--pro .rf-pc__tag { color: var(--acc); }
.proc__frame figcaption b { color: var(--acc); }

/* ---------- Chiffres cles sur fonds sombres ---------- */
.rf-hero__stat .v,
.est-result__num,
.save-teaser .pct .save-pct-num {
  color: var(--acc);
  text-shadow: 0 0 22px rgba(255, 210, 0, .3);
}
.ccol.us .opt-badge { background: var(--acc); color: #111214; border-color: var(--acc); }
.ccol.us .ct { color: var(--acc); }
.ccol.us ul li::before { color: var(--acc); }

/* ---------- Blocs de mise en avant : lavis chaud ---------- */
.blog-cta-inline {
  background: var(--sand);
  color: var(--sand-ink);
}
.blog-cta-inline p { color: var(--sand-ink); }
.benefice-card__icon { background: var(--acc-wash); color: var(--acc-txt); }
.robot-compare__table tr.is-current { background: var(--acc-wash); }
.robot-compare__table tr.is-current .robot-compare__chip {
  background: #fff;
  border-color: #f0c9b3;
}
.cfg-result .check { background: var(--acc-deep); color: #fff; }

/* ---------- Manifeste hors accueil : meme sable ---------- */
.manifesto {
  background: var(--sand);
  color: var(--sand-ink);
}
.manifesto__inner h2 { color: var(--sand-ink); }
.manifesto__inner .em { color: var(--sand-acc); }
.manifesto__media::after { background: rgba(239, 227, 213, .86); }

/* ---------- Pastilles de categorie des fiches concurrents ----------
   C'etait un code couleur a trois valeurs dont une en lime.
   On le repasse en trois paliers du bleu du site, neutres,
   pour ne pas concurrencer la rouille. */
.rc-tile--autolaveuse .rc-tile__avatar { background: var(--color-brand-light); color: var(--acc-txt); }
.rc-tile--balayeuse .rc-tile__avatar { background: var(--bg-2); color: var(--color-brand-dark); }
.rc-tile--aspirateur .rc-tile__avatar { background: var(--bg-1); color: var(--color-brand-dark); border: 1px solid var(--color-line); }

/* ---------- Corrections d'adjacence ----------
   Trois pages enchainent deux sections de meme niveau, qui fusionnent. */
.rp-section--soft + .rp-section--soft,
.sector-cards-grid + .sector-cards,
.rp-section + .rp-section--soft { background: var(--bg-2); }

/* ============================================================
   FAMILLE NEUTRE SABLE, bascule de tout le site
   Les quatre tokens ci-dessous pilotent 65 selecteurs.
   Echelle de luminance : 100 / 92,5 / 81,6 / 68,2 / 3,2
   ============================================================ */

:root {
  --bg-0: #FFFFFF;
  --bg-1: #FAF8F6;          /* 92,5 */
  --bg-2: #F2EEE9;          /* 81,6 */
  --color-bg-soft: #FAF8F6;
  --color-brand-light: #E9E4DC;   /* remplace le bleu pale #E9E4DC */

  /* encre : le gris froid echouait sur les fonds chauds */
  --color-muted: #605C55;         /* 4,75:1 sur le sable, 6,81:1 sur blanc */

  /* accent : recale d'un cran pour tenir sur N2 */
  --acc-deep: #E4BC00;            /* blanc 5,59  N1 5,19  N2 4,61 */

  /* le sable des sections descend d'un cran, sinon il se confond avec N2 */
  --sand: #E9E4DC;                /* 68,2 */
  --sand-ink: #2B2825;
  --sand-muted: #605C55;
  --sand-acc: #B89400;            /* 5,09:1 sur le nouveau sable */
}

/* Le bleu fort tombe a 4,14:1 sur la teinte chaude : on le remplace
   dans les pastilles qui l'utilisaient comme texte. */
.section-header__overline,
.gl-entry__tag,
.gl-entry .tag-n3,
.rp-adv__ic,
.fq-cat-head .ic,
.robot-usage,
.sectstat__v,
.sectstat__l,
.stats-bar__num,
.stats-bar__label { color: var(--color-brand-dark); }

/* Les etiquettes de section restent en rouille pleine, elles ne dependent
   pas de la teinte */
.section-header__overline,
.pricing-leadgen__content__overline,
.section-header__eyebrow,
.sector-hero__eyebrow,
.rp-eyebrow { background: var(--acc-deep); color: #fff; }

/* Le hero degrade partait du bleu tres clair : il part maintenant du sable clair */
.page-service__hero { background: linear-gradient(180deg, var(--bg-1), #fff); }

/* Trame des sections texturees : passage au brun, le bleu n'a plus lieu d'etre */
.guarantees--energy::before {
  background-image:
    linear-gradient(rgba(46, 33, 26, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 33, 26, .05) 1px, transparent 1px);
}

/* Les cartes posees sur un fond colore restent en blanc pur */
.pitch-band__benefit,
.guarantees--energy .guarantee,
.sector-chapter,
.rp-solidcard,
.clean-card,
.rp-adv { background: #fff; }

/* Bordures : la ligne bleue devient une ligne chaude */
:root { --color-line: #EFEBE5; }

/* ---------- Bleus clairs en dur : bordures et fonds de composants ----------
   Ils dataient du systeme bleu et tranchent sur les surfaces chaudes.
   Seuls les bleus servant de TEXTE sur les blocs navy sont conserves. */
.cfg-progress { background: var(--color-line); }
.step .sx { background: var(--bg-2); color: var(--sand-muted); }
.opt,
.qtextarea,
.field input { border-color: var(--color-line); }
.ccol .opt-badge { background: var(--bg-1); border-color: var(--color-line); }

/* ============================================================
   MOTS ACCENTUES DANS LES TITRES
   Ils etaient restes en bleu (--color-brand-primary-strong), alors
   que la regle veut que l'accent porte la rouille. Trois contextes,
   selon le fond sur lequel le titre est pose.
   ============================================================ */

/* Fonds clairs, blanc, N1, N2 */
.accent,
.em,
.fq .em,
.cc .em,
.gl .em,
.rp-section .accent,
.cc-hero .em,
.fq-hero .em { color: var(--acc-txt); }

/* Fonds sombres, navy et heros video */
.sector-hero--media .sector-hero__title .accent,
.briques-head .accent,
.briques-sec .accent,
.briques-sec .em,
.cc-final h2 .em,
.cc-final-sec .accent,
.pricing-leadgen .accent,
.pricing-leadgen .em,
.guarantees:not(.guarantees--energy) .accent,
.conversion .accent,
.cross-block .accent,
.page-service__hero--cinema .accent,
.page-service__hero--cinema .em { color: var(--acc); }

/* Fonds sable, le ton rouille y descend d'un cran (3,90:1 sinon) */
.manifesto .em,
.manifesto__inner .em,
.manifesto--quiet .manifesto__inner .em,
.manifesto .accent,
.service-cta-final .accent,
.service-cta-final .em { color: var(--sand-acc); }

/* L'italique de .em est conserve la ou il existait */
.fq .em, .cc .em, .gl .em { font-style: normal; }

/* ============================================================
   CARTES SECTEURS, troisieme niveau de lecture
   Le surtitre (.env-card__tag) etait style mais jamais rempli.
   On l'utilise pour le robot recommande, et on ajoute la ligne
   de zones qui permet au visiteur de se reconnaitre.
   ============================================================ */

.env-card,
.env-card__body { min-height: 268px; }

/* Le voile se densifie en bas : trois lignes de texte a tenir au lieu de deux */
.env-card__media {
  background-image:
    linear-gradient(180deg,
      rgba(27, 28, 30, .30) 0%,
      rgba(27, 28, 30, .46) 30%,
      rgba(27, 28, 30, .74) 62%,
      rgba(27, 28, 30, .96) 100%),
    var(--env-img);
}

.env-card__body { gap: .3rem; }

/* Surtitre : le robot recommande, en rouille */
.env-card__tag {
  color: var(--acc);
  margin-bottom: .1rem;
}

/* Zones concernees : la ligne qui fait qu'on se reconnait */
.env-card__zones {
  font-size: .85rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 8px rgba(27, 28, 30, .6);
  margin-bottom: .35rem;
}

.env-card__title { margin-bottom: .05rem; }

/* La fleche se detache du bloc de texte */
.env-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

/* La vignette robot laisse la place au texte : elle remonte et retrecit */
.env-card__robot {
  width: 78px;
  height: 78px;
  top: 12px;
  right: 12px;
}

/* Lien de secours sous la grille */
.sector-cards-grid__cta {
  text-align: center;
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: .95rem;
}
.sector-cards-grid__cta a {
  color: var(--acc-txt);
  font-weight: 600;
}

@media (max-width: 640px) {
  .env-card,
  .env-card__body { min-height: 244px; }
  .env-card__zones { font-size: .82rem; }
  .env-card__robot { width: 64px; height: 64px; }
}

/* ============================================================
   LA GAMME, bande horizontale, details au survol
   Au repos une carte ne montre que sa photo, sa famille et son nom.
   Les caracteristiques montent du bas au survol, sur un panneau
   navy plein : aucune superposition de transparences.
   Le defilement vertical fait glisser la bande vers la gauche.
   ============================================================ */

/* N1 et non sable : le bandeau final juste apres est deja sur sable,
   deux sections identiques a la suite fusionneraient */
.gm { position: relative; background: var(--bg-0); }
.gm__piste { display: none; }
.gm__vue { padding: 3.4rem 0 0; }

/* ---------- entete ---------- */
.gm__entete { max-width: 1180px; margin-bottom: 1.9rem; }
.gm__titre {
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.16; letter-spacing: -.01em;
  margin: .55rem 0 .45rem; color: var(--sand-ink);
}
.gm__titre .ho { color: var(--sand-acc); }
.gm__sous { margin: 0; max-width: 44rem; color: var(--sand-muted); font-size: .95rem; line-height: 1.6; }

/* ---------- la bande ---------- */
.gm__bande {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .6rem;
}
.gm__bande:focus-visible { outline: 3px solid var(--sand-acc); outline-offset: 4px; }
.gm__ruban {
  display: flex; gap: 1rem; width: max-content;
  padding-inline: max(1.2rem, calc((100vw - 1180px) / 2));
}

/* ---------- une carte ---------- */
.gm__carte {
  position: relative;
  flex: 0 0 auto;
  width: clamp(268px, 27vw, 400px);
  height: clamp(400px, 62svh, 540px);
  border-radius: var(--radius-md, 18px);
  overflow: hidden;
  background: #111214;
  scroll-snap-align: center;
  isolation: isolate;
}
.gm__photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--gm-img);
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform .7s var(--ease-out, ease);
}

/* --- etat de repos : famille + nom sur un fondu simple --- */
.gm__socle {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.2rem 1.3rem 1.25rem;
  background: linear-gradient(180deg, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, .82) 58%, rgba(17, 18, 20, .96) 100%);
  transition: opacity .3s ease, transform .4s var(--ease-out, ease);
}
.gm__famille {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc);
}
.gm__nom { color: #fff; font-size: 1.32rem; font-weight: 600; line-height: 1.12; }

/* --- panneau de details : navy plein, monte du bas --- */
.gm__detail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: #111214;
  padding: 1.25rem 1.3rem 1.3rem;
  transform: translateY(101%);
  transition: transform .42s var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.gm__nom--d { margin: .1rem 0 .3rem; }
.gm__punch { margin: 0 0 .5rem; color: #dcc9b4; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.gm__desc { margin: 0 0 .9rem; color: #CFC9BF; font-size: .86rem; line-height: 1.55; }

.gm-spec { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .45rem; }
.gm-spec li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  border-top: 1px solid rgba(232, 228, 220, .2); padding-top: .36rem;
}
.gm-spec__k { font-size: .72rem; color: #B3ACA1; }
.gm-spec__v { font-size: .84rem; font-weight: 600; color: #fff; text-align: right; }

.gm__lien { color: var(--acc); font-weight: 600; font-size: .87rem; text-decoration: none; }
.gm__lien:hover { text-decoration: underline; }

/* --- l'ouverture ---
   Deux garde-fous, parce que la bande glisse SOUS le curseur :
   1. pendant le defilement, les cartes sont inertes (.is-scrolling)
   2. l'ouverture est retardee de 140 ms, pour qu'un curseur qui passe
      ne declenche rien. La fermeture, elle, est immediate. */
.gm.is-scrolling .gm__carte { pointer-events: none; }

@media (hover: hover) {
  .gm__carte:hover .gm__detail,
  .gm__carte:focus-within .gm__detail { transform: translateY(0); transition-delay: .14s; }
  .gm__carte:hover .gm__socle,
  .gm__carte:focus-within .gm__socle { opacity: 0; transform: translateY(12px); transition-delay: .14s; }
  .gm__carte:hover .gm__photo,
  .gm__carte:focus-within .gm__photo { transform: scale(1.05); }
  .gm__carte:hover .gm__pouce,
  .gm__carte:focus-within .gm__pouce { opacity: 0; }
}

/* pastille d'appel : signale qu'il y a quelque chose a voir,
   maintenant que l'ouverture demande une intention */
.gm__pouce {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--acc-deep);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 600; line-height: 1;
  box-shadow: 0 4px 14px rgba(17, 18, 20, .4);
  transition: opacity .25s ease;
}
/* sans survol possible, le panneau reste ouvert */
@media (hover: none) {
  .gm__detail { position: static; transform: none; padding-top: 0; }
  .gm__socle { display: none; }
  .gm__carte { height: auto; display: flex; flex-direction: column; }
  .gm__photo { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .gm__detail { padding-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gm__detail, .gm__socle, .gm__photo { transition: none; }
}

/* ---------- barre de progression ---------- */
.gm__barre { position: relative; height: 2px; margin-top: 1.6rem; background: rgba(46, 33, 26, .16); border-radius: 2px; }
.gm__jauge { position: absolute; left: 0; top: 0; height: 100%; width: var(--gm-p, 12%); background: var(--acc-deep); border-radius: 2px; transition: width .3s var(--ease-out, ease); }

.gm__pied { text-align: center; margin: 0; padding: 1.5rem 1.2rem 3rem; color: var(--sand-muted); font-size: .93rem; }
.gm__pied a { color: var(--sand-acc); font-weight: 600; }

/* ============================================================
   Mode pilote : le defilement vertical translate la bande
   ============================================================ */
.gm.is-live .gm__piste { display: block; margin-top: -100svh; }
.gm.is-live .gm__vue {
  position: sticky; top: 0; height: 100svh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; z-index: 2; padding: 0;
}
.gm.is-live .gm__bande { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.gm.is-live .gm__ruban { will-change: transform; }
.gm.is-live .gm__jauge { transition: none; }

@media (max-width: 560px) {
  .gm__carte { width: min(84vw, 340px); }
}

/* ------------------------------------------------------------
   Versions Pro : ornement dore
   L'or est a 45deg, la rouille a 25deg : seulement 20deg d'ecart.
   Pour qu'il lise "or" et non "rouille delavee", il est plus clair
   et moins sature que l'accent, et surtout en degrade - c'est le
   degrade qui fait le metal, pas la teinte.

   L'or ne designe jamais une action, uniquement un rang. La rouille
   garde l'exclusivite des liens et des boutons : la regle tient.
   ------------------------------------------------------------ */

:root {
  --or: #C9A227;
  --or-clair: #EBD9A3;
  --or-metal: linear-gradient(135deg, #A8801F 0%, #EBD9A3 26%, #C9A227 52%, #F0E2B8 74%, #B08D22 100%);
}

/* le liseré : un cadre en degrade, obtenu par masque */
.gm__carte--pro { box-shadow: inset 0 0 0 1.5px var(--or); }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .gm__carte--pro { box-shadow: none; }
  .gm__carte--pro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--or-metal);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* la pastille d'appel passe en or, texte navy */
.gm__carte--pro .gm__pouce {
  background: var(--or-metal);
  color: #111214;
  box-shadow: 0 4px 14px rgba(201, 162, 39, .38);
}

/* un filet dore couronne le panneau de details */
.gm__carte--pro .gm__detail { position: absolute; }
.gm__carte--pro .gm__detail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  background: var(--or-metal);
}

/* la famille, seul mot qui change de couleur : elle dit le rang */
.gm__carte--pro .gm__famille { color: var(--or-clair); }

/* les filets du tableau de caracteristiques se teintent */
.gm__carte--pro .gm-spec li { border-top-color: rgba(201, 162, 39, .38); }

/* au survol, une lueur chaude - la seule concession au "power" */
@media (hover: hover) {
  .gm__carte--pro { transition: box-shadow .35s ease; }
  .gm__carte--pro:hover,
  .gm__carte--pro:focus-within { box-shadow: 0 14px 40px -14px rgba(201, 162, 39, .5); }
}

/* le lien reste en rouille : l'or n'appelle jamais a l'action */
.gm__carte--pro .gm__lien { color: var(--acc); }

/* le label de rang, pose au repos en haut a gauche,
   en miroir de la pastille d'appel */
.gm__label {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 .72rem;
  border-radius: 999px;
  background: var(--or, #C9A227);
  background-image: var(--or-metal);
  color: #111214;
  font-size: .655rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(17, 18, 20, .38);
  transition: opacity .25s ease, transform .35s var(--ease-out, ease);
}
/* il s'efface quand le panneau s'ouvre : l'information detaillee prend le relais */
@media (hover: hover) {
  .gm__carte:hover .gm__label,
  .gm__carte:focus-within .gm__label { opacity: 0; transform: translateY(-6px); }
}
@media (hover: none) {
  .gm__label { top: .8rem; left: .8rem; }
}

/* ============================================================
   VOTRE ENVIRONNEMENT, mosaique pleine largeur
   Ni grille de tuiles, ni liste : un mur d'images.
   Pas de gouttieres, pas de coins arrondis, pas de cadres : les
   huit cellules se touchent et forment une seule composition.
   Asymetrique, avec une cellule maitresse pour l'industrie.

   Le sol reste l'information distinctive du metier, mais il passe
   au second plan : il apparait au survol, sous le nom.
   ============================================================ */

.mz { background: var(--bg-1); padding: clamp(3.4rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }

.mz__tete { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mz__titre {
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: .8rem 0 .6rem;
  color: var(--color-brand-dark);
}
.mz__titre .ho { color: var(--acc-txt); }
.mz__sous { margin: 0; color: var(--color-muted); font-size: 1rem; line-height: 1.6; }

/* ---------- le mur ---------- */
/* Les images se touchaient, separees par un seul pixel blanc : huit
   interieurs gris qui se fondent les uns dans les autres, l'oeil ne
   sait plus ou une scene s'arrete. Un vrai ecart, plus un coin
   arrondi, font de chaque secteur un objet distinct. Le mur reste
   plus large que le texte, simplement decolle des bords. */
.mz__mur {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(165px, 16.5vw, 235px);
  gap: clamp(.55rem, 1.1vw, 1rem);
  padding-inline: var(--pad);
}

/* composition : 5+4+3 sur la premiere rangee, la maitresse tient deux rangees */
.mz__c--maitre { grid-column: span 5; grid-row: span 2; }
.mz__c--a { grid-column: span 4; }
.mz__c--b { grid-column: span 3; }
.mz__c--c { grid-column: span 4; }
.mz__c--d { grid-column: span 3; }
.mz__c--e { grid-column: span 4; }
.mz__c--f { grid-column: span 4; }
.mz__c--g { grid-column: span 4; }

.mz__c {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--color-brand-dark);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* l'image est une vraie balise : chargement differe natif et srcset,
   chaque cellule ne telecharge que la taille dont elle a besoin */
.mz__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .6s var(--ease-out, ease);
}
/* la trame d'un pixel qui separait les cellules n'a plus d'objet :
   c'est l'ecart entre les tuiles qui les distingue desormais */

/* Le texte occupe 78 a 95 % de la hauteur : c'est la que le voile doit etre
   dense, pas au dernier pixel. L'ancien degrade n'y etait qu'a moitie opaque,
   d'ou l'illisibilite sur les images a bas clair (sante, gymnases, sport). */
.mz__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 18, 20, 0) 25%,
    rgba(17, 18, 20, .55) 58%,
    rgba(17, 18, 20, .92) 82%,
    rgba(17, 18, 20, .96) 100%);
  transition: background .35s ease;
}

.mz__txt {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 1.8vw, 1.6rem);
  display: block;
}
.mz__nom {
  display: block;
  color: #fff;
  font-size: clamp(1.08rem, 1.85vw, 1.55rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-shadow: 0 1px 3px rgba(17, 18, 20, .8), 0 2px 18px rgba(17, 18, 20, .5);
}
.mz__c--maitre .mz__nom { font-size: clamp(1.5rem, 3vw, 2.5rem); }

.mz__sols {
  display: block;
  color: var(--acc);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .34s var(--ease-out, ease), opacity .28s ease, margin-top .34s ease;
}

@media (hover: hover) {
  .mz__c:hover .mz__img, .mz__c:focus-visible .mz__img { transform: scale(1.07); }
  .mz__c:hover .mz__voile,
  .mz__c:focus-visible .mz__voile {
    background: linear-gradient(180deg,
      rgba(17, 18, 20, .28) 0%,
      rgba(17, 18, 20, .72) 55%,
      rgba(17, 18, 20, .96) 82%,
      rgba(17, 18, 20, .98) 100%);
  }
  .mz__c:hover .mz__sols,
  .mz__c:focus-visible .mz__sols { max-height: 3.2rem; opacity: 1; margin-top: .3rem; }
}
.mz__c:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; }

/* sans survol : le sol est toujours affiche */
@media (hover: none) {
  .mz__sols { max-height: none; opacity: 1; margin-top: .3rem; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .mz__img { transition: none; }
}

.mz__pied { margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; color: var(--color-muted); font-size: .95rem; }
.mz__pied a { color: var(--acc-txt); font-weight: 600; }

/* ---------- recompositions ---------- */
@media (max-width: 1000px) {
  .mz__mur { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 22vw, 200px); }
  .mz__c--maitre { grid-column: span 6; grid-row: span 2; }
  .mz__c--a, .mz__c--c, .mz__c--e { grid-column: span 3; }
  .mz__c--b, .mz__c--d, .mz__c--f, .mz__c--g { grid-column: span 3; }
}
@media (max-width: 620px) {
  .mz__mur { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 34vw, 190px); }
  .mz__c--maitre { grid-column: span 2; grid-row: span 1; }
  .mz__c--a, .mz__c--b, .mz__c--c, .mz__c--d,
  .mz__c--e, .mz__c--f, .mz__c--g { grid-column: span 1; }
  .mz__nom, .mz__c--maitre .mz__nom { font-size: 1rem; }
  .mz__sols { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mz__c, .mz__voile, .mz__sols { transition: none; }
}

/* ============================================================
   GARANTIES
   Cinq engagements paralleles : pas de numerotation, l'ordre ne
   porte aucune information. La categorie sert d'amorce de phrase.

   Blocs pleins en navy : un bloc blanc n'aurait donne que 1,21:1
   sur le fond sable, il aurait fallu une ombre portee pour le faire
   exister, c'est-a-dire la carte generique. Le navy tient 14,73:1
   tout seul.

   La forme evite le rectangle : rayon fort sur deux coins opposes,
   presque nul sur les deux autres. Le coin arrondi du haut est
   souligne par un arc rouille qui epouse sa courbe.
   ============================================================ */

.gr { background: var(--bg-2); padding: clamp(3.4rem, 7vw, 6rem) 0; }
.gr__in { max-width: 1080px; }

.gr__titre {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
  color: var(--color-brand-dark);
  max-width: 22ch;
}
.gr__sous { margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--color-muted); font-size: 1.02rem; }

.gr__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* ---------- le bloc ---------- */
.gr__i {
  --r: clamp(22px, 3vw, 38px);
  position: relative;
  padding: clamp(1.5rem, 2.8vw, 2rem);
  background: #111214;
  border-radius: var(--r) 7px var(--r) 7px;
  transition: background-color .4s ease, border-radius .5s var(--ease-out, cubic-bezier(.2,.75,.3,1));
}

/* l'arc rouille epouse le grand rayon du haut */
.gr__pan {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--r) + 34px);
  height: calc(var(--r) + 34px);
  border-top: 2.5px solid var(--acc);
  border-left: 2.5px solid var(--acc);
  border-top-left-radius: var(--r);
  pointer-events: none;
  transition: width .45s var(--ease-out, cubic-bezier(.2,.75,.3,1)),
              height .45s var(--ease-out, cubic-bezier(.2,.75,.3,1)),
              opacity .4s ease;
}

.gr__t { margin: 0 0 .35rem; font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: #fff; }
.gr__p { margin: 0; color: #CFC9BF; font-size: .93rem; line-height: 1.6; }
.gr__cat { color: var(--acc); font-weight: 600; }
.gr__p b { color: #fff; font-weight: 600; }

.gr__i--lien {
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding-left: 0;
}
.gr__i--lien a { color: var(--acc-txt); font-weight: 600; font-size: .95rem; text-decoration: none; }

/* ---------- au survol : la forme s'inverse ---------- */
@media (hover: hover) {
  .gr__i:hover { background-color: #211E1B; border-radius: 7px var(--r) 7px var(--r); }
  .gr__i:hover .gr__pan { width: calc(var(--r) + 4px); height: calc(var(--r) + 4px); opacity: 0; }
  .gr__i--lien:hover { background: transparent; border-radius: 0; }
  .gr__i--lien:hover a { text-decoration: underline; }
}

/* ---------- l'entree, si le JS l'active ---------- */
.gr.is-anim .gr__i {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease var(--d, 0ms),
              transform .6s var(--ease-out, cubic-bezier(.2,.75,.3,1)) var(--d, 0ms),
              background-color .4s ease, border-radius .5s ease;
}
.gr.is-anim .gr__pan {
  width: calc(var(--r) + 4px);
  height: calc(var(--r) + 4px);
  opacity: 0;
  transition: width .55s var(--ease-out, cubic-bezier(.2,.75,.3,1)) calc(var(--d, 0ms) + 320ms),
              height .55s var(--ease-out, cubic-bezier(.2,.75,.3,1)) calc(var(--d, 0ms) + 320ms),
              opacity .35s ease calc(var(--d, 0ms) + 320ms);
}
.gr.is-anim.is-vu .gr__i { opacity: 1; transform: none; }
.gr.is-anim.is-vu .gr__pan { width: calc(var(--r) + 34px); height: calc(var(--r) + 34px); opacity: 1; }

@media (min-width: 700px) { .gr__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .gr__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .gr__i, .gr__pan { transition: none; }
  .gr.is-anim .gr__i { opacity: 1; transform: none; }
  .gr.is-anim .gr__pan { width: calc(var(--r) + 34px); height: calc(var(--r) + 34px); opacity: 1; }
}

/* ============================================================
   PITCH BAND, trois promesses, trois couleurs, de la profondeur
   Chaque encadre empile les trois couleurs de la marque :
   une masse rouille qui porte le chiffre, un corps navy qui porte
   la promesse, un filet et un titre en sable chaud entre les deux.

   La profondeur ne vient pas d'une ombre portee mais d'une vraie
   perspective : la carte bascule de quelques degres selon la
   position du curseur, et ses couches se decalent en Z.
   ============================================================ */

.pb { background: var(--bg-0); padding: clamp(3.6rem, 7.5vw, 6.5rem) 0; }

.pb__intro { max-width: 44rem; margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); }
.pb__titre {
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 .7rem;
  color: var(--color-brand-dark);
  font-weight: 500;
  text-wrap: balance;
}
.pb__lead { margin: 0; color: var(--color-muted); font-size: 1.05rem; }

.pb__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.7rem);
  perspective: 1400px;
}

/* ---------- l'encadre ---------- */
.pb__b {
  --r: clamp(26px, 4vw, 46px);
  position: relative;
  display: flex;
  flex-direction: column;
  background: #111214;
  border-radius: var(--r) 10px var(--r) 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out, cubic-bezier(.2,.75,.3,1));
  will-change: transform;
}
.pb__b.is-tilt { transition: transform .12s linear; }

/* le haut : masse rouille, avancee en Z */
.pb__haut {
  position: relative;
  background: var(--acc-deep);
  color: #fff;
  padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.5rem, 2.8vw, 2rem) clamp(1.3rem, 2.4vw, 1.7rem);
  transform: translateZ(26px);
}
/* le filet sable, troisieme couleur, articule les deux masses */
.pb__haut::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--sand);
}
.pb__preuve { margin: 0; color: #fff; font-size: .98rem; line-height: 1.3; text-wrap: balance; }
.pb__av { color: rgba(255, 255, 255, .92); font-size: .88rem; display: block; margin-bottom: .1rem; }
.pb__n {
  display: block;
  font-size: clamp(2.6rem, 4.6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .94;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}

/* le bas : navy, titre en sable chaud */
.pb__bas {
  padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.5rem, 2.8vw, 2rem) clamp(1.7rem, 3.2vw, 2.2rem);
  transform: translateZ(14px);
}
.pb__t { margin: 0 0 .45rem; font-size: 1.14rem; font-weight: 600; color: var(--sand); }
.pb__d { margin: 0; color: #CFC9BF; font-size: .94rem; line-height: 1.62; }

@media (min-width: 820px) { .pb__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- l'entree ---------- */
.pb.is-anim .pb__b {
  opacity: 0;
  transform: translateY(22px) rotateX(6deg);
  transition: opacity .6s ease var(--d, 0ms),
              transform .75s var(--ease-out, cubic-bezier(.2,.75,.3,1)) var(--d, 0ms);
}
.pb.is-anim.is-vu .pb__b { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pb__b, .pb__haut, .pb__bas { transform: none !important; transition: none; }
  .pb.is-anim .pb__b { opacity: 1; }
}

/* ============================================================
   BANDE DE PREUVE, logos clients, au bas du hero
   Elle etait en section separee, donc invisible a l'ouverture :
   header 72px + hero a 86vh occupaient deja tout le premier ecran.
   Elle est desormais posee au bas du hero, en bandeau plein,
   ce qui la place dans la premiere impression quelle que soit
   la hauteur de la fenetre.

   Les logos sont en couleur, a 100 % d'opacite : en gris a 70 %,
   ils se lisaient comme un decor. Ce sont des references clients,
   c'est la preuve la plus forte de la page.
   ============================================================ */

.hproof {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: #fff;
  border-top: 1px solid var(--color-line);
}
.hproof__in {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  max-width: 1320px;
  margin-inline: auto;
  padding: 1.15rem max(1.2rem, calc((100vw - 1320px) / 2));
}
.hproof__lab {
  flex: 0 0 auto;
  margin: 0;
  max-width: 12.5rem;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-brand-dark);
}

.hproof__marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
}
.hproof__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: clamp(2.4rem, 4.6vw, 4rem);
  align-items: center;
  animation: hproof-scroll 58s linear infinite;
}
.hproof__marquee:hover .hproof__track { animation-play-state: paused; }
.hproof__track .logos-marquee__item { flex: 0 0 auto; }
.hproof__track img {
  /* source a 80px de haut : au-dela de 40px d'affichage ca floute en
     densite 2x. Les logos le supportent mieux qu'une photo, mais un
     reexport a 160px les rendrait nets. */
  height: clamp(38px, 4.4vw, 56px);
  width: auto;
  display: block;
  filter: none;          /* en couleur : ce sont des references, pas un decor */
}
@keyframes hproof-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* le contenu du hero remonte pour ne pas passer sous la bande */
.page-service__hero--cinema > .container { padding-bottom: clamp(5rem, 9vh, 7rem); }

/* ---------- mobile : la bande repasse dans le flux ---------- */
@media (max-width: 900px) {
  /* `margin-top: auto` colle la bande au bas du hero. Sans lui, le
     hero garde sa hauteur minimale et laisse sous les logos une
     centaine de pixels de video sombre, orpheline. */
  .hproof { position: static; margin-top: auto; width: 100%; }

  .hproof__in { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1rem 1.2rem; }
  .hproof__lab { max-width: none; }
  .hproof__marquee { width: 100%; }
  .page-service__hero--cinema > .container { padding-bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hproof__track { animation: none; flex-wrap: wrap; width: auto; }
  .hproof__marquee { -webkit-mask: none; mask: none; }
}

/* ---- rythme des fonds apres reordonnancement ----
   sombre > blanc > N1 > navy > N2 > blanc > sable > N1 > sable
   aucun palier ne se repete d'une section a la suivante ---- */
.local-map-band { background: var(--bg-1); }

/* ============================================================
   PLATEFORME, trois apports natifs, degradation silencieuse
   ============================================================ */

/* 1. Transitions de page natives.
      Les navigateurs qui ne connaissent pas la regle l'ignorent. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: .22s; }
::view-transition-new(root) { animation-duration: .28s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* 2. Rendu differe des sections hors champ.
      Le navigateur ne calcule leur mise en page qu'a l'approche.
      Volontairement pas applique a .gm : sa piste de defilement est
      mesuree au chargement, un rendu differe fausserait le calcul. */
.pb, .mz, .pricing-leadgen, .gr, .manifesto, .local-map-band, .service-cta-final,
.seo-content, .faq, .maillage-villes, .blog-related, .sector-chapter {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* 3. Cesure et equilibrage typographique */
.pb__d, .gr__p, .gm__desc, .mz__sols, .sx__sols { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* le defilement ancre proprement sous le header colle */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   /etudes-de-cas/, grille filtrable
   Une seule grille pour les 22 fiches, avec une barre de filtres
   collante. Filtrage en CSS pur : boutons radio masques et
   selecteurs freres. Aucun JavaScript, donc le filtre fonctionne
   meme si les scripts echouent, et les 22 fiches restent dans le
   HTML donc indexables.

   L'origine se lit sans effort : nos deploiements portent une
   photo et une pastille rouille, les references externes n'ont
   ni l'une ni l'autre.
   ============================================================ */

/* --- chiffres du hero --- */
.hstats {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
}
.hstats li { display: flex; flex-direction: column; }
.hstats__n { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; color: var(--acc); line-height: 1; }
.hstats__l { font-size: .84rem; color: #EDE8E0; margin-top: .3rem; }

.fx { background: var(--bg-1); padding: 0 0 clamp(3rem, 6vw, 5rem); }
.fx__radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* --- barre de filtres, collante sous l'en-tete --- */
.fx__bar {
  position: sticky; top: 72px; z-index: 20;
  background: rgba(250, 246, 240, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
  padding: .8rem 0;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.fx__chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fx__chips::-webkit-scrollbar { display: none; }
.fx__chips label {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  font-size: .86rem; font-weight: 600;
  color: var(--color-muted);
  cursor: pointer; white-space: nowrap;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.fx__chips label span {
  font-size: .72rem; font-weight: 700;
  color: var(--color-muted); opacity: .7;
  font-variant-numeric: tabular-nums;
}
.fx__chips label:hover { border-color: var(--acc-txt); color: var(--acc-txt); }

/* --- la fiche --- */
.fx__grid { display: grid; gap: .9rem; align-items: start; }
@media (min-width: 700px) { .fx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .fx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fx__c {
  --r: 24px;
  background: #111214; color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  overflow: hidden;
}

.fx__s { display: block; position: relative; cursor: pointer; list-style: none; }
.fx__s:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; }

.fx__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.fx__img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform .6s var(--ease-out, ease); }
@media (hover: hover) { .fx__s:hover .fx__img img { transform: scale(1.05); } }

.fx__body { display: block; padding: 1.1rem 3rem 1.3rem 1.3rem; }
.fx__meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .45rem; }
.fx__badge {
  display: inline-block; padding: .18em .6em; border-radius: 999px;
  background: var(--acc-deep); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .02em;
}
.fx__sect, .fx__pays { font-size: .8rem; color: #B3ACA1; }
.fx__t { display: block; color: #fff; font-size: 1.06rem; font-weight: 600; line-height: 1.22; margin-bottom: .3rem; }
.fx__robots { display: block; color: var(--acc); font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.fx__r { display: block; color: #CFC9BF; font-size: .88rem; line-height: 1.55; }

.fx__plus { position: absolute; bottom: 1.35rem; right: 1.2rem; width: 18px; height: 18px; transition: transform .35s var(--ease-out, cubic-bezier(.2,.75,.3,1)); }
.fx__plus::before, .fx__plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--acc); border-radius: 2px; }
.fx__plus::after { transform: rotate(90deg); transition: transform .35s var(--ease-out, cubic-bezier(.2,.75,.3,1)); }

.fx__f {
  list-style: none; margin: 0; padding: 1.1rem 0 0;
  border-top: 1px solid rgba(232, 228, 220, .18);
  display: grid; gap: .5rem 1.6rem;
}
@media (min-width: 700px) { .fx__f { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx__f li { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.fx__k { color: #B3ACA1; font-size: .8rem; }
.fx__v { color: #fff; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }

.fx__note { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; color: var(--color-muted); font-size: .85rem; line-height: 1.6; }

@media (max-width: 900px) { .fx__bar { top: 0; } }
@media (prefers-reduced-motion: reduce) { .fx__img img, .fx__plus, .fx__plus::after { transition: none; } }

/* --- filtrage --- */
#fc-logistique:checked ~ .container .fx__grid > :not([data-s="logistique"]) { display: none; }
#fc-industrie:checked ~ .container .fx__grid > :not([data-s="industrie"]) { display: none; }
#fc-sante:checked ~ .container .fx__grid > :not([data-s="sante"]) { display: none; }
#fc-bureaux:checked ~ .container .fx__grid > :not([data-s="bureaux"]) { display: none; }
#fc-retail:checked ~ .container .fx__grid > :not([data-s="retail"]) { display: none; }
#fc-hotellerie:checked ~ .container .fx__grid > :not([data-s="hotellerie"]) { display: none; }
#fc-sport:checked ~ .container .fx__grid > :not([data-s="sport"]) { display: none; }
#fc-collectivites:checked ~ .container .fx__grid > :not([data-s="collectivites"]) { display: none; }

/* --- pastille active --- */
#fc-tous:checked ~ .fx__bar label[for="fc-tous"],
#fc-logistique:checked ~ .fx__bar label[for="fc-logistique"],
#fc-industrie:checked ~ .fx__bar label[for="fc-industrie"],
#fc-sante:checked ~ .fx__bar label[for="fc-sante"],
#fc-bureaux:checked ~ .fx__bar label[for="fc-bureaux"],
#fc-retail:checked ~ .fx__bar label[for="fc-retail"],
#fc-hotellerie:checked ~ .fx__bar label[for="fc-hotellerie"],
#fc-sport:checked ~ .fx__bar label[for="fc-sport"],
#fc-collectivites:checked ~ .fx__bar label[for="fc-collectivites"] {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #fff;
}
#fc-tous:checked ~ .fx__bar label[for="fc-tous"] span,
#fc-logistique:checked ~ .fx__bar label[for="fc-logistique"] span,
#fc-industrie:checked ~ .fx__bar label[for="fc-industrie"] span,
#fc-sante:checked ~ .fx__bar label[for="fc-sante"] span,
#fc-bureaux:checked ~ .fx__bar label[for="fc-bureaux"] span,
#fc-retail:checked ~ .fx__bar label[for="fc-retail"] span,
#fc-hotellerie:checked ~ .fx__bar label[for="fc-hotellerie"] span,
#fc-sport:checked ~ .fx__bar label[for="fc-sport"] span,
#fc-collectivites:checked ~ .fx__bar label[for="fc-collectivites"] span { color: #fff; opacity: .75; }

#fc-tous:focus-visible ~ .fx__bar label[for="fc-tous"],
#fc-logistique:focus-visible ~ .fx__bar label[for="fc-logistique"],
#fc-industrie:focus-visible ~ .fx__bar label[for="fc-industrie"],
#fc-sante:focus-visible ~ .fx__bar label[for="fc-sante"],
#fc-bureaux:focus-visible ~ .fx__bar label[for="fc-bureaux"],
#fc-retail:focus-visible ~ .fx__bar label[for="fc-retail"],
#fc-hotellerie:focus-visible ~ .fx__bar label[for="fc-hotellerie"],
#fc-sport:focus-visible ~ .fx__bar label[for="fc-sport"],
#fc-collectivites:focus-visible ~ .fx__bar label[for="fc-collectivites"] { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* le pays sort de la carte compacte : il devient un element de contexte
   dans le detail, pas une etiquette d'origine sur la vignette */

/* ============================================================
   Fiches en panneau : mecanique :target, sans JavaScript
   La vignette est un lien vers l'ancre du panneau. Le panneau
   s'ouvre par-dessus la page, qui ne bouge pas sous le lecteur.
   L'URL devient partageable et le bouton retour referme.
   ============================================================ */

.fx__c {
  display: block;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
.fx__c:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; }
@media (hover: hover) { .fx__c:hover .fx__img img { transform: scale(1.05); } }

.fxm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(.8rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.fxm:target { opacity: 1; visibility: visible; }

.fxm__fond {
  position: absolute; inset: 0;
  background: rgba(17, 18, 20, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.fxm__box {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88svh, 900px);
  overflow-y: auto;
  background: #111214;
  color: #fff;
  border-radius: clamp(20px, 3vw, 34px) 10px clamp(20px, 3vw, 34px) 10px;
  transform: translateY(16px) scale(.98);
  transition: transform .38s var(--ease-out, cubic-bezier(.2,.75,.3,1));
}
.fxm:target .fxm__box { transform: none; }

.fxm__x {
  position: absolute; top: .8rem; right: .9rem; z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(17, 18, 20, .8);
  color: #fff; font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.fxm__x:hover { background: var(--acc-deep); }
.fxm__x:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

.fxm__img { display: block; aspect-ratio: 21 / 8; overflow: hidden; }
.fxm__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fxm__hd { padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.6vw, 2rem) 0; }
.fxm__t { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; line-height: 1.15; color: #fff; }
.fxm__robots { margin: 0 0 .5rem; color: var(--acc); font-size: .95rem; font-weight: 600; }
.fxm__r { margin: 0; color: #CFC9BF; font-size: .95rem; line-height: 1.55; }

.fxm__g { display: grid; gap: 1.4rem; padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.6vw, 2rem); }
.fxm__g h4 { margin: 0 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--acc); }
.fxm__g p { margin: 0; color: #EDE8E0; font-size: .94rem; line-height: 1.7; }

.fxm__box .fx__f {
  margin: 0 clamp(1.3rem, 2.6vw, 2rem);
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(232, 228, 220, .18);
}
.fxm__note {
  margin: 1.2rem clamp(1.3rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 1.9rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 228, 220, .18);
  color: #B3ACA1; font-size: .8rem; line-height: 1.5;
}
.fxm__box > .fxm__g:last-child { padding-bottom: clamp(1.6rem, 3vw, 2.2rem); }

@media (prefers-reduced-motion: reduce) {
  .fxm, .fxm__box { transition: none; }
}

/* --- note de methode : signal de transparence E-E-A-T --- */
.fxe {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--color-line);
}
.fxe__t {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 1.2rem; color: var(--color-brand-dark);
}
.fxe__g { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .fxe__g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } }
.fxe__g h3 { margin: 0 0 .4rem; font-size: .92rem; font-weight: 600; color: var(--acc-txt); }
.fxe__g p { margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.65; }

/* le descriptif du site, sous la raison sociale */
.fxm__site {
  margin: -.1rem 0 .55rem;
  color: #B3ACA1;
  font-size: .84rem;
  font-weight: 500;
}

/* ============================================================
   ETUDES DE CAS, teaser de l'accueil, version plein cadre
   Un seul cas, en grand, avec ses quatre chiffres. Le logo du
   client porte la preuve, la photo porte le contexte. Le lien
   vers les 24 fiches passe en dessous : le bloc convertit
   d'abord, il informe ensuite.
   ============================================================ */

.cs { background: var(--sand); color: var(--sand-ink); padding: clamp(3.4rem, 7vw, 6rem) 0; }
.cs__in { max-width: 1180px; }
.cs__tete { max-width: 44rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.cs__titre {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.04; letter-spacing: -.032em;
  margin: 0 0 .5rem; color: var(--sand-ink); font-weight: 500;
}
.cs__sous { margin: 0; color: var(--sand-muted); font-size: 1.02rem; line-height: 1.6; }

.vd {
  position: relative;
  display: block;
  border-radius: clamp(22px, 3vw, 30px) 10px clamp(22px, 3vw, 30px) 10px;
  overflow: hidden;
  min-height: clamp(340px, 42vw, 460px);
  text-decoration: none;
  isolation: isolate;
}
.vd__photo { position: absolute; inset: 0; z-index: 0; }
.vd__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1); transition: transform .8s var(--ease-out, ease);
}
/* le voile atteint 95 % la ou le bloc de texte commence, pas au dernier pixel */
.vd__voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(17, 18, 20, .25) 0%, rgba(17, 18, 20, .78) 55%,
    rgba(17, 18, 20, .95) 82%, rgba(17, 18, 20, .97) 100%);
}
.vd__in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: inherit;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.vd__logo { display: block; margin-bottom: 1rem; }
.vd__logo img { height: clamp(30px, 3.4vw, 38px); width: auto; display: block; }

.vd__t {
  display: block; color: #fff;
  font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -.025em;
  margin-bottom: 1.3rem; max-width: 26ch;
}
.vd__ch {
  list-style: none; margin: 0 0 1.3rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2.4rem;
}
.vd__ch li { display: flex; flex-direction: column; font-size: .78rem; color: #CFC9BF; }
.vd__ch li span {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem); font-weight: 600; color: #fff;
  letter-spacing: -.02em; margin-bottom: .15rem; font-variant-numeric: tabular-nums;
}
.vd__go { color: var(--acc); font-weight: 600; font-size: .95rem; }

@media (hover: hover) {
  .vd:hover .vd__photo img { transform: scale(1.04); }
  .vd:hover .vd__go { text-decoration: underline; }
}
.vd:focus-visible { outline: 3px solid var(--sand-acc); outline-offset: 4px; }

.vd__pied { margin: 1.2rem 0 0; }
.vd__pied a { color: var(--sand-acc); font-weight: 600; font-size: .95rem; text-decoration: none; }
.vd__pied a:hover { text-decoration: underline; }

.cs.is-anim .vd { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .7s var(--ease-out, cubic-bezier(.2,.75,.3,1)); }
.cs.is-anim.is-vu .vd { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vd__photo img { transition: none; }
  .cs.is-anim .vd { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   /location-ou-achat/, comparaison des deux modeles
   La page n'oppose pas les modeles : elle donne les criteres.
   Le tableau est le coeur, il doit rester lisible au doigt.
   ============================================================ */

.lo { background: var(--bg-0); padding: clamp(3rem, 6vw, 5rem) 0; }
.lo--alt { background: var(--bg-1); }
.lo__in { max-width: 1000px; }
.lo__h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.06; letter-spacing: -.03em;
  margin: 0 0 .6rem; color: var(--color-brand-dark); font-weight: 500;
}
.lo__sous { margin: 0 0 1.8rem; color: var(--color-muted); font-size: 1rem; line-height: 1.6; max-width: 46rem; }
.lo__note { margin: 1.2rem 0 0; color: var(--color-muted); font-size: .86rem; line-height: 1.6; }

/* ---- le tableau ---- */
.lo__tw { overflow-x: auto; margin-top: 1.6rem; -webkit-overflow-scrolling: touch; }
.lo__t { width: 100%; border-collapse: collapse; min-width: 620px; }
.lo__t thead th {
  text-align: left; vertical-align: bottom;
  padding: 0 1.1rem 1rem;
  font-size: .95rem; font-weight: 600; color: var(--color-brand-dark);
  border-bottom: 2px solid var(--acc-deep);
  width: 34%;
}
.lo__t thead td { width: 32%; }
.lo__t tbody th {
  text-align: left; vertical-align: top;
  padding: 1.05rem 1.1rem 1.05rem 0;
  font-size: .9rem; font-weight: 600; color: var(--color-brand-dark);
  border-bottom: 1px solid var(--color-line);
}
.lo__t tbody td {
  vertical-align: top; padding: 1.05rem 1.1rem;
  font-size: .9rem; line-height: 1.6; color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
}
.lo__t tbody tr:hover td, .lo__t tbody tr:hover th { background: var(--bg-1); }
.lo--alt .lo__t tbody tr:hover td, .lo--alt .lo__t tbody tr:hover th { background: var(--bg-2); }

/* ---- ce qui ne change pas ---- */
.lo__cg { display: grid; gap: 1.3rem; }
@media (min-width: 760px) { .lo__cg { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; } }
.lo__c h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; color: var(--acc-txt); }
.lo__c p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.65; }

/* ---- dans quel cas ---- */
.lo__qg { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
@media (min-width: 820px) { .lo__qg { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
.lo__q {
  --r: clamp(20px, 3vw, 30px);
  background: #111214; color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
}
.lo__q h3 { margin: 0 0 .9rem; font-size: 1.08rem; font-weight: 600; color: var(--acc); }
.lo__q ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lo__q li {
  position: relative; padding-left: 1.3rem;
  color: #EDE8E0; font-size: .92rem; line-height: 1.6;
}
.lo__q li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
}

/* ---- FAQ ---- */
.lo__fg { display: grid; gap: .7rem; margin-top: 1.6rem; }
.lo__f {
  background: var(--bg-0);
  border-radius: 18px 6px 18px 6px;
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.lo__f summary {
  cursor: pointer; list-style: none;
  padding: 1rem 3rem 1rem 1.2rem; position: relative;
  font-size: .96rem; font-weight: 600; color: var(--color-brand-dark);
}
.lo__f summary::-webkit-details-marker { display: none; }
.lo__f summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 1.35rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--acc-deep); border-bottom: 2px solid var(--acc-deep);
  transform: rotate(45deg); transition: transform .3s ease;
}
.lo__f[open] summary::after { transform: rotate(-135deg); top: 1.55rem; }
.lo__f summary:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: -3px; }
.lo__f p { margin: 0; padding: 0 1.2rem 1.2rem; color: var(--color-muted); font-size: .92rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) { .lo__f summary::after { transition: none; } }

/* ---------- fiches robots : les deux modeles d'acquisition ---------- */
.mo { background: var(--bg-2); padding: clamp(2.8rem, 5.5vw, 4.5rem) 0; }
.mo__in { max-width: 1000px; }
.mo__h2 {
  font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.08; letter-spacing: -.028em;
  margin: 0 0 1.4rem; color: var(--color-brand-dark); font-weight: 500;
}
.mo__g { display: grid; gap: 1rem; }
@media (min-width: 780px) { .mo__g { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
.mo__c {
  --r: clamp(20px, 3vw, 28px);
  background: #111214; color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
.mo__c h3 { margin: 0 0 .6rem; font-size: 1.08rem; font-weight: 600; color: var(--acc); }
.mo__p { margin: 0 0 1rem; color: #EDE8E0; font-size: .92rem; line-height: 1.62; }
.mo__l { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(232, 228, 220,.18); display: grid; gap: .5rem; }
.mo__l li { position: relative; padding-left: 1.25rem; color: #CFC9BF; font-size: .88rem; line-height: 1.55; }
.mo__l li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.mo__pied { margin: 1.2rem 0 0; color: var(--color-muted); font-size: .9rem; line-height: 1.6; }
.mo__pied a { color: var(--acc-txt); font-weight: 600; text-decoration: none; }
.mo__pied a:hover { text-decoration: underline; }

/* ---------- /technologie/ : la gamme regroupee par besoin ---------- */
.gp { margin: clamp(2rem, 4vw, 3rem) 0 1.2rem; }
.gp:first-of-type { margin-top: .5rem; }
.gp__t {
  margin: 0 0 .35rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600; letter-spacing: -.022em; color: var(--color-brand-dark);
}
.gp__s { margin: 0; color: var(--color-muted); font-size: .93rem; line-height: 1.6; max-width: 52rem; }

/* ---------- pages d'offre : /service-complet/ et /achat-maintenance/ ---------- */
.of { background: var(--bg-1); padding: clamp(3rem, 6vw, 5rem) 0; }
.of--alt { background: var(--bg-2); }
.of__in { max-width: 980px; }
.of__h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.05rem); line-height: 1.07; letter-spacing: -.028em;
  margin: 0 0 1.4rem; color: var(--color-brand-dark); font-weight: 500;
}
.of__intro {
  margin: 0 0 1.8rem; font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  line-height: 1.68; color: var(--color-brand-dark); max-width: 46rem;
}
.of__pg { display: grid; gap: .9rem; margin-bottom: 1rem; }
@media (min-width: 700px) { .of__pg { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.of__p {
  --r: clamp(20px, 3vw, 26px);
  background: #111214; color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column;
}
.of__p:first-child { box-shadow: inset 0 0 0 2px var(--acc-deep); }
.of__pn {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 600;
  letter-spacing: -.03em; color: var(--acc); line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.of__pl { font-size: .84rem; color: #CFC9BF; margin-top: .35rem; line-height: 1.45; }
.of__pnote { margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem); color: var(--color-muted); font-size: .88rem; line-height: 1.6; max-width: 46rem; }

.of__g { display: grid; gap: 1.8rem; }
@media (min-width: 820px) { .of__g { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
.of__b h3 {
  margin: 0 0 .8rem; font-size: 1.06rem; font-weight: 600; color: var(--acc-txt);
  padding-bottom: .6rem; border-bottom: 2px solid var(--color-line);
}
.of__b ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.of__b li { position: relative; padding-left: 1.35rem; color: var(--color-muted); font-size: .93rem; line-height: 1.6; }
.of__b li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-deep); }
.of__b li strong { color: var(--color-brand-dark); font-weight: 600; }

.of__el { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .of__el { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; } }
.of__e { display: flex; gap: .9rem; align-items: flex-start; }
.of__en {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--acc-deep); color: #fff; font-size: .82rem; font-weight: 700;
}
.of__e h4 { margin: .2rem 0 .3rem; font-size: 1rem; font-weight: 600; color: var(--color-brand-dark); }
.of__e p { margin: 0; color: var(--color-muted); font-size: .92rem; line-height: 1.62; }

.of__cmp { margin: 0 0 1.6rem; color: var(--color-muted); font-size: .98rem; line-height: 1.7; max-width: 48rem; }
.of__fin {
  margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--color-line);
  color: var(--color-muted); font-size: .95rem; line-height: 1.65; max-width: 46rem;
}
.of__fin a { color: var(--acc-txt); font-weight: 600; text-decoration: none; }
.of__fin a:hover { text-decoration: underline; }

.of__fg { display: grid; gap: .7rem; }
.of__f { background: var(--bg-0); border-radius: 18px 6px 18px 6px; border: 1px solid var(--color-line); overflow: hidden; }
.of__f summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; position: relative; font-size: .96rem; font-weight: 600; color: var(--color-brand-dark); }
.of__f summary::-webkit-details-marker { display: none; }
.of__f summary::after { content: ""; position: absolute; right: 1.2rem; top: 1.35rem; width: 10px; height: 10px; border-right: 2px solid var(--acc-deep); border-bottom: 2px solid var(--acc-deep); transform: rotate(45deg); transition: transform .3s ease; }
.of__f[open] summary::after { transform: rotate(-135deg); top: 1.55rem; }
.of__f summary:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: -3px; }
.of__f p { margin: 0; padding: 0 1.2rem 1.2rem; color: var(--color-muted); font-size: .92rem; line-height: 1.68; }
@media (prefers-reduced-motion: reduce) { .of__f summary::after { transition: none; } }

/* ============================================================
   HARMONISATION, une seule charte
   Les jetons de l'ancienne charte bleu-vert pointent vers la
   palette actuelle. 143 usages se mettent a jour sans qu'on
   touche aux regles qui les consomment.
   ============================================================ */

:root {
  --color-brand-primary: #E4BC00;
  --color-brand-primary-strong: #E4BC00;
  --color-energy: #E9E4DC;
  --color-brand-light: #E9E4DC;
  --color-line: #EFEBE5;
  --shadow-sm: 0 1px 2px rgba(27, 28, 30, .05);
  --shadow-lift: 0 2px 6px -2px rgba(27, 28, 30, .08), 0 16px 34px -18px rgba(27, 28, 30, .22);
  --shadow-cta: none;
}

/* exceptions : sur fond sombre, la rouille profonde ne passerait pas */
.fq-hero .kicker,
.gl-hero .kicker,
.rf-hero__cat,
.rf-pc--pro .rf-pc__tag,
.rf-pc--pro .rf-pc__li li::before,
.site-footer__col a:hover,
.site-footer__legal a:hover,
.briques-head .accent,
.sector-hero--media .sector-hero__title .accent,
.rf-kfig__v span,
.case__who,
.cc-final h2 .em,
.est-result__cap,
.ccol.us ul li::before { color: var(--acc); }

.rf-hero__stat .v,
.est-result__num,
.save-teaser .pct .save-pct-num { color: var(--sand); }

/* les fonds sable portent de l'encre chaude */
.sectstat__v,
.sectstat__l,
.robot-usage,
.rp-chip--clean,
.gl-entry .tag-n3,
.gl-entry__tag,
.sector-hero__eyebrow,
.section-header__eyebrow,
.robot-card__spec { color: var(--sand-ink); }

/* les champs de saisie ont besoin d'une bordure visible */
.field input,
.qtextarea,
.opt,
.fq-search input { border-color: #97918B; }

/* ---------- le menu deroulant : aucun encadre ---------- */
.nav-dropdown__menu {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(27, 28, 30, .45);
  padding: .3rem 0 .45rem;
  min-width: 252px;
  left: -.2rem;
}
.nav-dropdown__menu::before {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  top: 0;
  height: 2px;
  background: var(--acc-deep);
}
.nav-dropdown__menu a {
  position: relative;
  border-radius: 0;
  padding: .58rem 1.1rem;
  font-size: .91rem;
  font-weight: 500;
  color: var(--color-brand-dark);
  transition: color .2s ease, padding-left .28s var(--ease-out, ease);
}
.nav-dropdown__menu a::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--acc-deep);
  transform: translateY(-50%);
  transition: width .28s var(--ease-out, cubic-bezier(.2,.75,.3,1));
}
.nav-dropdown__menu a:hover {
  background: none;
  color: var(--acc-txt);
  padding-left: 1.5rem;
}
.nav-dropdown__menu a:hover::before { width: .7rem; }

.nav-dropdown__menu-item--featured {
  background: none;
  color: var(--acc-txt);
  font-weight: 600;
  margin-top: .3rem;
  padding-top: .65rem !important;
  border-top: 1px solid var(--color-line);
}
.nav-dropdown__menu-item--featured:hover { background: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__menu a,
  .nav-dropdown__menu a::before { transition: none; }
}

/* ---------- les deux modeles, bloc reutilisable ---------- */
.dm { background: var(--bg-1); padding: clamp(2.8rem, 5.5vw, 4.5rem) 0; }
.dm--alt { background: var(--bg-2); }
.dm__in { max-width: 1000px; }
.dm__h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.05rem); line-height: 1.08; letter-spacing: -.028em;
  margin: 0 0 .5rem; color: var(--color-brand-dark); font-weight: 500;
}
.dm__sous { margin: 0 0 1.5rem; color: var(--color-muted); font-size: .98rem; line-height: 1.6; max-width: 46rem; }
.dm__g { display: grid; gap: 1rem; }
@media (min-width: 780px) { .dm__g { grid-template-columns: 1.08fr 1fr; gap: 1.2rem; align-items: start; } }
.dm__c {
  --r: clamp(20px, 3vw, 28px);
  background: #111214; color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
.dm__c--reco { box-shadow: inset 0 0 0 2px var(--acc-deep); }
.dm__tag {
  display: inline-block; margin-bottom: .7rem;
  padding: .2em .65em; border-radius: 999px;
  background: var(--acc-deep); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dm__tag--alt { background: rgba(232, 228, 220, .16); color: #EDE8E0; }
.dm__c h3 { margin: 0 0 .55rem; font-size: 1.12rem; font-weight: 600; color: #fff; }
.dm__c p { margin: 0; color: #EDE8E0; font-size: .93rem; line-height: 1.65; }
.dm__pied { margin: 1.2rem 0 0; }
.dm__pied a { color: var(--acc-txt); font-weight: 600; font-size: .95rem; text-decoration: none; }
.dm__pied a:hover { text-decoration: underline; }

.enc {
  margin: 1.6rem 0; padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--acc-deep);
  background: var(--bg-2); border-radius: 4px 16px 16px 4px;
}
.enc p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--color-brand-dark); }
.enc a { color: var(--acc-txt); font-weight: 600; }

/* ---------- le medaillon de distinction, sur la video du hero ----------
   Pose en haut a droite, au-dessus du voile mais sous le texte.
   Le hero descend jusqu'a la bande logos : on le cale sur le tiers
   haut pour qu'il ne concurrence ni le titre ni les boutons. ---------- */
.page-service__hero--cinema { position: relative; }
.hlab {
  position: absolute;
  top: clamp(1.4rem, 4vh, 3.2rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 3;
  display: block;
  line-height: 0;
  border-radius: 16px 5px 16px 5px;
  overflow: hidden;
  /* filet or : le medaillon a le meme navy que le voile du hero,
     sans lisere il s'y fondrait */
  box-shadow: inset 0 0 0 1.5px rgba(201, 162, 39, .85), 0 12px 34px -14px rgba(0, 0, 0, .75);
  transition: transform .35s var(--ease-out, ease);
}
.hlab img { width: clamp(158px, 14vw, 205px); height: auto; display: block; }
.hlab:hover { transform: translateY(-2px); }
.hlab:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

/* sur mobile le hero est trop dense : le medaillon passe dans le fil
   du contenu. Le placement lui-meme est traite plus bas, dans la
   requete 1100px, pour eviter deux reglages concurrents. */
@media (max-width: 900px) {
  .page-service__hero--cinema .container { padding-top: clamp(1rem, 3vh, 2rem); }
}

/* ---------- fiches catalogue : le visuel produit dans le hero ----------
   Ces visuels sont detoures sur fond clair : ils ne supportent pas
   d'etre poses directement sur le voile sombre du hero. On leur donne
   un cartouche sable, qui les detache et rappelle la charte. ---------- */
.sector-hero__inner:has(.rf-visu) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
}
@media (min-width: 900px) {
  .sector-hero__inner:has(.rf-visu) { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; }
  .sector-hero__inner:has(.rf-visu) > .sector-hero__eyebrow,
  .sector-hero__inner:has(.rf-visu) > .page-service__hero__title,
  .sector-hero__inner:has(.rf-visu) > .page-service__hero__subtitle { grid-column: 1; }
  .rf-visu { grid-column: 2; grid-row: 1 / -1; }
}
.rf-visu {
  --r: clamp(22px, 3vw, 30px);
  background: var(--bg-1);
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  display: grid;
  place-items: center;
  max-width: 300px;
  margin-inline: auto;
}
.rf-visu img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
@media (max-width: 899px) {
  .rf-visu { max-width: 200px; margin-inline: 0; }
  .rf-visu img { max-height: 160px; }
}

/* les visuels photographiques ne se fondent pas : ils se cadrent */
.rf-visu--photo {
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.rf-visu--photo img {
  mix-blend-mode: normal;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 899px) { .rf-visu--photo img { max-height: 170px; } }

/* ---------- vignettes des listes de robots ---------- */
.rc-tile__avatar--img {
  display: grid;
  place-items: center;
  background: var(--bg-1);
  overflow: hidden;
  padding: 4px;
}
.rc-tile__avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

/* ============================================================
   BANDE DE PREUVES, meme mecanique que la bande gamme
   Le defilement vertical entraine une translation horizontale.
   Sans JavaScript, la bande defile horizontalement de facon
   native avec accroche : rien n'est perdu.
   ============================================================ */
.pv { background: var(--bg-0); }
.pv__piste { position: relative; }
.pv__vue { padding: clamp(2rem, 3.6vw, 3rem) 0 clamp(1.5rem, 2.6vw, 2.1rem); }
.pv.is-live .pv__piste { margin-bottom: -100svh; }
.pv.is-live .pv__vue { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

.pv__entete { max-width: 46rem; margin-bottom: clamp(1rem, 1.8vw, 1.4rem); }
.pv__titre {
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.035em;
  margin: .3rem 0 .45rem; color: var(--color-brand-dark); font-weight: 500;
}
.pv__titre .ho { color: var(--acc-txt); }
.pv__sous { margin: 0; color: var(--color-muted); font-size: 1rem; line-height: 1.6; }

.pv__bande {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 clamp(1rem, 5vw, 4rem);
}
.pv__bande::-webkit-scrollbar { display: none; }
.pv__bande:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: -3px; }
.pv.is-live .pv__bande { overflow: hidden; scroll-snap-type: none; }

.pv__ruban { display: flex; gap: clamp(.8rem, 1.6vw, 1.2rem); width: max-content; will-change: transform; }

.pv__c {
  --r: clamp(22px, 3vw, 30px);
  flex: 0 0 auto;
  width: clamp(230px, 25vw, 290px);
  scroll-snap-align: center;
  background: #111214;
  color: #fff;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* une carte sur trois porte l'accent : le rythme evite le mur uniforme */
.pv__c:nth-child(3n+1) { box-shadow: inset 0 0 0 2px var(--acc-deep); }

.pv__n { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .55rem; }
.pv__v {
  font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 600;
  letter-spacing: -.04em; line-height: .95; color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.pv__u { font-size: .95rem; font-weight: 600; color: var(--acc); }
.pv__l { display: block; font-size: 1rem; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: .6rem; }
.pv__p {
  display: block; margin-top: auto; padding-top: .8rem;
  border-top: 1px solid rgba(232, 228, 220, .18);
  color: #CFC9BF; font-size: .84rem; line-height: 1.5;
}

.pv__pied { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.pv__jauge-piste { display: block; height: 3px; border-radius: 3px; background: var(--color-line); overflow: hidden; }
.pv__jauge { display: block; height: 100%; width: 22%; border-radius: 3px; background: var(--acc-deep); }
.pv:not(.is-live) .pv__pied { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pv.is-live .pv__piste { margin-bottom: 0; }
  .pv.is-live .pv__vue { position: static; min-height: 0; }
  .pv.is-live .pv__bande { overflow-x: auto; }
}

/* trois cartes seulement : elles occupent la largeur au lieu de defiler */
.pv__ruban { width: 100%; }
.pv__c { width: auto; flex: 1 1 0; min-width: 230px; }
@media (min-width: 900px) {
  .pv__bande { padding-inline: 0; }
  .pv__ruban { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 2rem); }
  .pv__c { min-height: 0; }
  .pv__v { font-size: clamp(2.4rem, 4.4vw, 3.2rem); }
}

/* Sous 1100px, la bande n'a plus la place a droite : le medaillon
   rejoint le fil du contenu, au-dessus du titre.
   Le hero est un flex en colonne centre : sans `align-self`, le
   medaillon se centrait et se retrouvait a cheval sur le haut de la
   video, desaligne du titre. On le cale donc a gauche, sur la meme
   marge que le texte (--pad, celle de .container), avec de l'air
   au-dessus pour qu'il ne colle plus a l'en-tete. */
@media (max-width: 1100px) {
  .hlab {
    position: static;
    transform: none;
    align-self: flex-start;
    width: fit-content;
    margin: clamp(1.1rem, 3.5vh, 2.2rem) 0 clamp(.8rem, 2vh, 1.3rem) var(--pad);
  }
  .hlab img { width: clamp(146px, 21vw, 182px); }
  .hlab:hover { transform: translateY(-2px); }
}

/* ---------- bandeau de prix, present sur tous les gabarits ----------
   L'audit montrait que 93 % des pages parlaient de l'offre sans jamais
   dire ce qu'elle coute. Ce bandeau repond a la question la ou elle se
   pose, sans obliger a changer de page. ---------- */
.bp { background: var(--bg-2); padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.bp__in { max-width: 1000px; }
.bp__g { display: grid; gap: 1rem; }
@media (min-width: 780px) { .bp__g { grid-template-columns: 1.06fr 1fr; gap: 1.1rem; } }
.bp__c {
  --r: clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column;
  background: #111214; color: #fff; text-decoration: none;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  transition: transform .3s var(--ease-out, ease), background-color .3s ease;
}
.bp__c--reco { box-shadow: inset 0 0 0 2px var(--acc-deep); }
@media (hover: hover) { .bp__c:hover { transform: translateY(-2px); background: #1F1D1A; } }
.bp__c:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; }
.bp__tag {
  display: inline-block; align-self: flex-start; margin-bottom: .8rem;
  padding: .2em .65em; border-radius: 999px;
  background: var(--acc-deep); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.bp__tag--alt { background: rgba(232, 228, 220, .16); color: #EDE8E0; }
.bp__n {
  font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 600;
  letter-spacing: -.035em; color: var(--acc); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bp__u { font-size: .82rem; font-weight: 600; color: #CFC9BF; letter-spacing: 0; }
.bp__l { display: block; margin: .6rem 0 1rem; color: #EDE8E0; font-size: .9rem; line-height: 1.55; }
.bp__go { margin-top: auto; color: var(--acc); font-weight: 600; font-size: .9rem; }
.bp__pied { margin: 1.1rem 0 0; }
.bp__pied a { color: var(--acc-txt); font-weight: 600; font-size: .93rem; text-decoration: none; }
.bp__pied a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .bp__c { transition: none; } }

/* ---------- renvois de maillage ---------- */
.lnk { background: var(--bg-1); padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.lnk__in { max-width: 1000px; }
.lnk__lab {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--acc-txt);
}
.lnk__g { display: flex; flex-wrap: wrap; gap: .6rem; }
.lnk__g a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-brand-dark);
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.lnk__g a::after { content: "\2192"; color: var(--acc-txt); }
.lnk__g a:hover { border-color: var(--acc-txt); color: var(--acc-txt); }
.lnk__g a:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* le nombre de colonnes suit le nombre reel de chapitres :
   trois ou quatre, mais toujours sur une seule ligne */
.sector-chapters:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sector-chapters:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .sector-chapters,
  .sector-chapters:has(> :nth-child(4)),
  .sector-chapters:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sector-chapters,
  .sector-chapters:has(> :nth-child(4)),
  .sector-chapters:has(> :nth-child(5)) { grid-template-columns: 1fr; }
}
.sector-chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 2.9rem;
  border-radius: clamp(20px, 2.6vw, 26px) 8px clamp(20px, 2.6vw, 26px) 8px;
  border: 1px solid var(--color-line);
  box-shadow: none;
  transition: border-color .3s ease, transform .3s var(--ease-out, ease);
}
@media (hover: hover) {
  .sector-chapter:hover { border-color: var(--acc-txt); transform: translateY(-2px); }
}
.sector-chapter__num {
  position: absolute;
  top: 1.1rem;
  left: 1.5rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--acc-txt);
  font-variant-numeric: tabular-nums;
  transition: transform .3s var(--ease-out, ease);
}
/* le chiffre est le point d'entree du bloc : il doit s'affirmer,
   pas s'effacer. Il grandit legerement au survol de la carte. */
@media (hover: hover) { .sector-chapter:hover .sector-chapter__num { transform: scale(1.12); } }
.sector-chapter__klabel { color: var(--acc-txt); }
.sector-chapter h3 {
  font-size: clamp(.98rem, 1.45vw, 1.12rem);
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.sector-chapter p { font-size: .88rem; line-height: 1.58; }
.sector-chapter__list { margin-top: auto; padding-top: 1rem; }
.sector-chapter__list li { padding-left: 1.35rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .sector-chapter, .sector-chapter__num { transition: none; }
}

/* ---------- grilles de cartes : plus d'orphelin ----------
   .feature-grid et .blog-grid etaient figees a 4 et 3 colonnes alors
   qu'elles recoivent de 3 a 86 elements selon les pages. auto-fit
   repartit sans laisser une carte seule sur sa ligne. ---------- */
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.blog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* les grilles de briques et de garanties suivent, par securite :
   si le nombre d'elements change un jour, la mise en page tient */
.briques { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.rp-advgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.opt-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ---------- comparatifs replies ----------
   Le bloc faisait 526 mots et 25 liens en sixieme position, avant les
   resultats et les engagements. Ce n'est pas ce qu'un visiteur cherche
   en arrivant : il descend en fin de page et s'ouvre a la demande. ---------- */
.cmp-fold { background: var(--bg-1); padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.cmp { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.cmp__b {
  position: relative;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: 1.15rem 3rem 1.15rem 0;
  cursor: pointer; list-style: none;
}
.cmp__b::-webkit-details-marker { display: none; }
.cmp__b:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: -3px; }
.cmp__t { font-size: clamp(1.05rem, 1.9vw, 1.25rem); font-weight: 600; color: var(--color-brand-dark); }
.cmp__n { font-size: .86rem; color: var(--color-muted); }
.cmp__p { position: absolute; right: .3rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); }
.cmp__p::before, .cmp__p::after {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 2px; border-radius: 2px; background: var(--acc-deep);
}
.cmp__p::after { transform: rotate(90deg); transition: transform .3s var(--ease-out, ease); }
.cmp[open] .cmp__p::after { transform: rotate(0); }
@media (hover: hover) { .cmp__b:hover .cmp__t { color: var(--acc-txt); } }
/* la section d'origine perd son fond et ses marges : elle est dans le repli */
.cmp__x > .rp-section { background: transparent !important; padding-top: 0; }
.cmp__x .section-header { display: none; }
@media (prefers-reduced-motion: reduce) { .cmp__p::after { transition: none; } }

/* ---------- engagements en bande compacte ----------
   Cinq cartes navy dans une grille de trois colonnes laissaient deux
   orphelines et pesaient lourd en fin de page. Ils tiennent desormais
   sur une ligne, chacun en une phrase. ---------- */
.eng { background: var(--bg-2); padding: clamp(2rem, 4vw, 3rem) 0; }
.eng__in { max-width: 1180px; }
.eng__h2 {
  margin: 0 0 1.2rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc-txt);
}
.eng__g {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.8rem);
}
@media (max-width: 1000px) { .eng__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .eng__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eng__i {
  position: relative;
  padding-top: .9rem;
  border-top: 2px solid var(--acc-deep);
}
.eng__k {
  display: block; margin-bottom: .3rem;
  font-size: .95rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--color-brand-dark);
}
.eng__d { display: block; color: var(--color-muted); font-size: .85rem; line-height: 1.5; }

/* ---------- « À lire aussi », propre au secteur ---------- */
.alr { background: var(--bg-0); padding: clamp(2rem, 4vw, 3rem) 0; }
.alr__in { max-width: 1180px; }
.alr__h2 {
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc-txt);
}
.alr__g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: .8rem;
}
.alr__c {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 1.05rem 1.2rem;
  background: var(--bg-1);
  border-radius: 18px 6px 18px 6px;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s var(--ease-out, ease);
}
.alr__t { font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--color-brand-dark); }
.alr__go { color: var(--acc-txt); font-weight: 700; flex: 0 0 auto; transition: transform .25s var(--ease-out, ease); }
@media (hover: hover) {
  .alr__c:hover { background: var(--bg-2); transform: translateY(-2px); }
  .alr__c:hover .alr__go { transform: translateX(3px); }
}
.alr__c:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .alr__c, .alr__go { transition: none; } }

/* ============================================================
   COMPARATEUR DE ROBOTS
   Parcours en trois temps : filtrer par fonction, choisir jusqu'a
   quatre robots, comparer. Le tableau met les robots en lignes et
   les criteres en colonnes, avec la colonne du nom fixe au defilement.
   ============================================================ */
.cp { background: var(--bg-0); padding: clamp(2.4rem, 5vw, 4rem) 0; }
.cp__in { max-width: 1240px; }

/* --- les etapes --- */
.cp__et {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: .9rem;
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--color-line);
}
.cp__et:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cp__etn {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acc-deep); color: #fff;
  font-size: .92rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cp__eth {
  margin: 0; font-size: clamp(1.1rem, 2.1vw, 1.4rem); font-weight: 600;
  letter-spacing: -.022em; color: var(--color-brand-dark);
}
.cp__etp { margin: .25rem 0 0; grid-column: 2; color: var(--color-muted); font-size: .9rem; line-height: 1.5; }

/* --- les fonctions --- */
.cp__fonc { display: flex; flex-wrap: wrap; gap: .5rem; }
.cp__fn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: #fff; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--color-brand-dark); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cp__fn:hover { border-color: var(--acc-txt); color: var(--acc-txt); }
.cp__fn[aria-pressed="true"] { background: var(--acc-deep); border-color: var(--acc-txt); color: #fff; }
.cp__fn:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }
.cp__fnn { font-size: .76rem; font-weight: 700; opacity: .62; font-variant-numeric: tabular-nums; }

.cp__bar { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.cp__q {
  flex: 1 1 240px; max-width: 340px;
  padding: .6rem .9rem;
  border: 1.5px solid #97918B; border-radius: 12px 4px 12px 4px;
  background: #fff; font: inherit; font-size: .9rem; color: var(--color-brand-dark);
}
.cp__q:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 1px; }
.cp__cpt { font-size: .86rem; font-weight: 600; color: var(--acc-txt); }
.cp__raz {
  margin-left: auto;
  border: 1.5px solid var(--color-line); background: #fff;
  padding: .45rem .9rem; border-radius: 999px;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--color-muted); cursor: pointer;
}
.cp__raz:hover { border-color: var(--acc-txt); color: var(--acc-txt); }

/* --- la grille de choix --- */
.cp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: .6rem;
  max-height: 360px; overflow-y: auto;
  padding: .3rem .3rem 1rem;
}
.cp__card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .85rem .5rem .9rem;
  background: var(--bg-1); border: 1.5px solid transparent;
  border-radius: 14px 4px 14px 4px;
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.cp__card:hover { border-color: var(--acc-txt); }
.cp__card:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }
.cp__card[aria-pressed="true"] { border-color: var(--acc-txt); background: #fff; }
.cp__card[aria-pressed="true"]::after {
  content: "\2713"; position: absolute; top: .4rem; right: .4rem;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--acc-deep); color: #fff;
  font-size: .72rem; line-height: 19px; font-weight: 700;
}
.cp__grid.is-plein .cp__card[aria-pressed="false"] { opacity: .42; }
.cp__card img { width: 100%; max-width: 62px; height: auto; mix-blend-mode: multiply; }
.cp__ci {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg-2); color: var(--acc-txt); font-weight: 700; font-size: 1.1rem;
}
.cp__cn { font-size: .8rem; font-weight: 600; color: var(--color-brand-dark); line-height: 1.2; }
.cp__cf { font-size: .7rem; color: var(--color-muted); line-height: 1.2; }
.cp__vide { grid-column: 1 / -1; margin: 0; padding: 2rem 0; color: var(--color-muted); text-align: center; }

/* --- les onglets de themes --- */
.cp__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.cp__tab {
  padding: .5rem .9rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--color-muted); cursor: pointer;
}
.cp__tab:hover { color: var(--acc-txt); }
.cp__tab[aria-pressed="true"] { color: var(--acc-txt); border-bottom-color: var(--acc-txt); }
.cp__tab:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* --- le tableau : robots en lignes, criteres en colonnes --- */
.cp__tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cp__t { width: 100%; border-collapse: collapse; }
.cp__t--cmp { min-width: 640px; }
.cp__t thead th {
  position: sticky; top: 0; z-index: 1;
  padding: .7rem 1rem; background: var(--bg-0);
  text-align: left; vertical-align: bottom;
  font-size: .82rem; font-weight: 600; color: var(--color-brand-dark);
  border-bottom: 2px solid var(--acc-deep);
}
.cp__u { display: block; font-size: .72rem; font-weight: 500; color: var(--color-muted); }
.cp__t th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-0);
  text-align: left; vertical-align: top;
  padding: .85rem 1.2rem .85rem 0;
  font-size: .9rem; font-weight: 600; color: var(--color-brand-dark);
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.cp__t th[scope="row"] a { color: inherit; text-decoration: none; }
.cp__t th[scope="row"] a:hover { color: var(--acc-txt); text-decoration: underline; }
.cp__t td {
  vertical-align: top; padding: .85rem 1rem;
  font-size: .87rem; line-height: 1.5; color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
}
.cp__d { background: #FBF4CE; }
.cp__np { color: #605C55; font-style: italic; font-size: .82rem; }
.cp__leg { margin: .8rem 0 0; font-size: .82rem; color: var(--color-muted); }
.cp__hint { margin: 0; padding: 1.6rem 0; color: var(--color-muted); font-size: .92rem; }

/* --- la base complete, repliee --- */
.cp__all { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--color-line); }
.cp__allb {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.1rem 2.4rem 1.1rem 0;
  font-size: 1rem; font-weight: 600; color: var(--color-brand-dark);
}
.cp__allb::-webkit-details-marker { display: none; }
.cp__allb::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--acc-deep); border-bottom: 2px solid var(--acc-deep);
  transform: rotate(45deg); transition: transform .3s ease;
}
.cp__all[open] .cp__allb::after { transform: rotate(-135deg); margin-top: -2px; }
.cp__allb:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: -3px; }
.cp__note { margin: 1.4rem 0 0; color: var(--color-muted); font-size: .85rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .cp__fn, .cp__card, .cp__allb::after { transition: none; } }

/* les vignettes de marque, pour les robots dont nous n'avons pas la photo :
   elles occupent la meme place sans se faire passer pour un visuel produit */
.cp__gen { mix-blend-mode: normal !important; border-radius: 10px 3px 10px 3px; }
.cp__sansphoto {
  display: block; margin-top: .15rem;
  font-size: .62rem; font-style: italic; color: #605C55; line-height: 1.2;
}

/* ---------- la bande de preuves et sa voisine ----------
   Sous les cartes, le rembourrage de la bande s'ajoutait a celui de la
   section suivante : jusqu'a huit rem de blanc cumule. Les sections qui
   suivent directement la bande reduisent donc leur rembourrage haut.
   ---------- */
.pv + .mz,
.pv + .dm,
.pv + .cs,
.pv + .gr,
.pv + .eng,
.pv + .bp { padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* et la bande qui suit le hero n'a pas besoin de s'en decoller :
   la bande logos fait deja la separation */
.hproof + .pv .pv__vue,
.page-service__hero + .pv .pv__vue { padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- les cas concrets en carrousel ----------
   Empiles, deux ou trois pavés de statistiques ne se lisent pas. En
   carrousel, une fiche occupe la vue et l'accroche retient le regard
   au bon endroit. Le defilement est natif : rien a charger. ---------- */
.cases--car {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--acc-txt) var(--color-line);
  padding-bottom: 1rem;
  margin: 0;
}
.cases--car::-webkit-scrollbar { height: 6px; }
.cases--car::-webkit-scrollbar-track { background: var(--color-line); border-radius: 3px; }
.cases--car::-webkit-scrollbar-thumb { background: var(--acc-deep); border-radius: 3px; }
.cases--car:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 4px; }
.cases--car > .case {
  flex: 0 0 min(100%, 720px);
  scroll-snap-align: center;
  margin: 0;
}
@media (min-width: 1100px) { .cases--car > .case { flex-basis: min(78%, 820px); } }
/* l'indication de defilement, seulement s'il y a de quoi defiler */
.cases--car:has(> .case:nth-child(2))::after {
  content: "";
  flex: 0 0 1px;
}

/* ---------- la FAQ, en deux colonnes ----------
   Jusqu'a 35 questions en une seule colonne : la page n'en finissait
   pas. Les categories existaient deja, on les repartit. ---------- */
.faqx--2c {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
@media (max-width: 860px) { .faqx--2c { grid-template-columns: 1fr; } }
.faqx--2c .faqx__cat { break-inside: avoid; }
.faqx--2c .faqx__cattitle {
  margin: 0 0 .6rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc-txt);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-line);
}
.faqx--2c .faq__item { border-bottom: 1px solid var(--color-line); }
.faqx--2c .faq__summary {
  padding: .75rem 1.8rem .75rem 0;
  font-size: .92rem; line-height: 1.35;
}
.faqx--2c .faq__answer { font-size: .88rem; line-height: 1.6; padding-bottom: .9rem; }

/* ---------- label best-seller ----------
   Rouge vif, distinct de la rouille de la charte : c'est un signal
   commercial, pas un element de decor. ---------- */
.bsell {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5em;
  padding: .22em .6em .26em;
  border-radius: 999px;
  background: #C81E1E;
  color: #fff;
  font-size: .52em;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: super;
}
.rc-tile__modele .bsell,
.robot-card h3 .bsell { font-size: .62rem; vertical-align: middle; }

/* ---------- les regions, en bande defilante ----------
   Le maillage ne citait que Paris et Lille, ce qui contredisait la
   couverture nationale annoncee juste au-dessus. Les treize regions
   defilent, sur le meme principe que le carrousel des cas. ---------- */
.reg {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--acc) rgba(255, 255, 255, .18);
  padding-bottom: .8rem;
  margin-top: 1.2rem;
}
.reg::-webkit-scrollbar { height: 5px; }
.reg::-webkit-scrollbar-track { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.reg::-webkit-scrollbar-thumb { background: var(--acc); border-radius: 3px; }
.reg:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; }
.reg__c {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem;
  border: 1.5px solid rgba(232, 228, 220, .3);
  border-radius: 999px;
  color: #EDE8E0;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
  transition: border-color .22s ease, color .22s ease, background-color .22s ease;
}
.reg__g { color: var(--acc); font-weight: 700; }
@media (hover: hover) {
  .reg__c:hover { border-color: var(--acc); color: #fff; background: rgba(255, 210, 0, .12); }
}
.reg__c:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
/* sur fond clair, la bande prend les teintes de la charte claire */
.rp-section:not([style*="brand-dark"]) .reg__c { border-color: var(--color-line); color: var(--color-brand-dark); }
.rp-section:not([style*="brand-dark"]) .reg__g { color: var(--acc-txt); }
@media (hover: hover) {
  .rp-section:not([style*="brand-dark"]) .reg__c:hover { border-color: var(--acc-txt); color: var(--acc-txt); background: var(--bg-1); }
}
@media (prefers-reduced-motion: reduce) { .reg__c { transition: none; } }

/* ============================================================
   « VOS ENJEUX », rangée alignée et chiffre en filigrane
   Les cartes partent toutes de la même ligne. Leurs bords hauts
   se rejoignent donc en un filet continu qui traverse le bloc,
   et les cartes semblent suspendues à ce fil.

   Le chiffre passe en très grand contour clair dans le coin haut
   droit, DERRIÈRE le texte : il fait texture sans jamais disputer
   la lecture au label ni au titre, même quand celui-ci court sur
   trois lignes. C'est ce qui remplace l'ancienne disposition en
   escalier, où le chiffre débordait en haut à gauche et retombait
   sur « Le défi ».
   ============================================================ */
.sector-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(.9rem, 1.8vw, 1.5rem);
  align-items: start;
  position: relative;
}
.sector-chapters:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sector-chapters:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sector-chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.3vw, 1.75rem) clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2vw, 1.6rem);
  background: var(--bg-0);
  border: 0;
  border-top: 3px solid var(--acc-deep);
  border-radius: 0 0 clamp(16px, 2.4vw, 22px) 4px;
  box-shadow: none;
  /* le filigrane est confiné à la carte, il ne bave pas dans la gouttière */
  overflow: hidden;
  transition: transform .38s var(--ease-out, cubic-bezier(.2,.75,.3,1)),
              background-color .38s ease;
}

/* le chiffre, filigrane du coin haut droit, posé sous le texte.

   `left: auto` est indispensable : une règle plus haut dans la feuille
   (§ cartes numérotées) pose encore `left: 1.5rem`, et sans cette remise
   à zéro la boîte du chiffre s'étire sur toute la largeur de la carte —
   le glyphe se dessine alors à gauche, par-dessus le label.

   Aplat et non contour : `-webkit-text-stroke` dessine ses raccords en
   onglet, et le « 2 » de Poppins referme sa diagonale sur la barre du bas
   par un angle très aigu. Le contour y partait en pointe, un éclat visible
   sur le « 02 » — donc sur toutes les pages, le 2e chapitre étant toujours
   numéroté ainsi. Aucune propriété CSS ne règle ce raccord, et réduire
   l'épaisseur ne fait que rapetisser l'éclat. L'aplat supprime le problème,
   et affiche aussi le chiffre là où le contour n'est pas géré. */
.sector-chapter__num {
  position: absolute;
  top: clamp(.15rem, .7vw, .45rem);
  left: auto;
  right: clamp(.3rem, 1vw, .7rem);
  z-index: 0;
  font-size: clamp(3.4rem, 6vw, 4.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(184, 148, 0, .12);
  -webkit-text-stroke: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  /* le grossissement au survol hérité du § précédent n'a plus lieu d'être */
  transform: none;
  transition: color .38s ease;
}

/* le texte repasse systématiquement au-dessus du filigrane */
.sector-chapter__klabel,
.sector-chapter h3,
.sector-chapter p,
.sector-chapter__list { position: relative; z-index: 1; }

/* le fil continu auquel les cartes sont suspendues :
   il court aussi dans les gouttières, en plus discret que les bords
   hauts, de sorte que le départ de chaque carte reste marqué */
.sector-chapters::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 3px;
  background: rgba(184, 148, 0, .25);
  z-index: -1;
}

@media (hover: hover) {
  .sector-chapter:hover { transform: translateY(-3px); background: var(--bg-1); }
  .sector-chapter:hover .sector-chapter__num {
    transform: none;
    color: rgba(184, 148, 0, .19);
  }
}

.sector-chapter__klabel {
  color: var(--acc-txt);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.sector-chapter h3 {
  font-size: clamp(.98rem, 1.5vw, 1.14rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .5rem;
}
.sector-chapter p { font-size: .87rem; line-height: 1.55; margin: 0; }
.sector-chapter__list { margin-top: auto; padding-top: .9rem; }
.sector-chapter__list li { padding-left: 1.3rem; line-height: 1.45; font-size: .82rem; }

@media (max-width: 1000px) {
  .sector-chapters,
  .sector-chapters:has(> :nth-child(4)),
  .sector-chapters:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 2.6rem) 1rem; }
  /* sur plusieurs rangées, un fil unique en haut du bloc n'a plus de sens */
  .sector-chapters::before { display: none; }
}
@media (max-width: 620px) {
  .sector-chapters,
  .sector-chapters:has(> :nth-child(4)),
  .sector-chapters:has(> :nth-child(5)) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-chapter, .sector-chapter__num { transition: none; }
  .sector-chapter:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Variante FAQ du même bloc
   Les trois pages de catégorie robots réemploient .sector-chapters
   pour une foire aux questions : cinq cartes, sans chiffre ni label,
   dans une colonne de 820 px. La rangée de cinq y donnait des colonnes
   de 146 px, où « fonctionne-t-il ? » se coupait au milieu.

   On les reconnaît à l'absence de chiffre — une rangée « Vos enjeux »
   est toujours numérotée — et on les repasse en pile, séparées par un
   filet léger : une question et sa réponse se lisent en pleine largeur.
   ------------------------------------------------------------------ */
.sector-chapters:not(:has(.sector-chapter__num)),
.sector-chapters:not(:has(.sector-chapter__num)):has(> :nth-child(4)),
.sector-chapters:not(:has(.sector-chapter__num)):has(> :nth-child(5)) {
  grid-template-columns: 1fr;
  gap: 0;
}
.sector-chapters:not(:has(.sector-chapter__num))::before { display: none; }
.sector-chapters:not(:has(.sector-chapter__num)) .sector-chapter {
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  background: transparent;
}
.sector-chapters:not(:has(.sector-chapter__num)) .sector-chapter:first-child {
  border-top: 0;
  padding-top: 0;
}
.sector-chapters:not(:has(.sector-chapter__num)) .sector-chapter h3 {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  margin-bottom: .45rem;
}
.sector-chapters:not(:has(.sector-chapter__num)) .sector-chapter p {
  font-size: .92rem;
  line-height: 1.62;
}
@media (hover: hover) {
  /* une question ne se soulève pas au survol */
  .sector-chapters:not(:has(.sector-chapter__num)) .sector-chapter:hover {
    transform: none;
    background: transparent;
  }
}

/* ---------- cas concrets : verbatim, fréquence, retour ----------
   Trois données techniques ne convainquent personne qui ne soit déjà
   convaincu. Une phrase de client, un rapport de fréquence et un
   calcul de retour parlent tout de suite. ---------- */
.rc {
  flex: 0 0 min(100%, 720px);
  scroll-snap-align: center;
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border-radius: clamp(22px, 3vw, 30px) 8px clamp(22px, 3vw, 30px) 8px;
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
@media (min-width: 1100px) { .rc { flex-basis: min(78%, 820px); } }
.rc__ctx {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-txt);
  margin-bottom: .9rem;
}
.rc__q { margin: 0 0 1.3rem; padding-left: 1.2rem; border-left: 3px solid var(--acc-deep); }
.rc__q p {
  margin: 0 0 .5rem;
  font-size: clamp(1.02rem, 1.9vw, 1.24rem);
  line-height: 1.42; letter-spacing: -.015em;
  color: var(--color-brand-dark);
  text-wrap: balance;
}
.rc__q p::before { content: "\00AB\00A0"; color: var(--acc-txt); }
.rc__q p::after { content: "\00A0\00BB"; color: var(--acc-txt); }
.rc__q cite { font-style: normal; font-size: .84rem; font-weight: 600; color: var(--color-muted); }

.rc__g { display: grid; gap: .8rem; }
@media (min-width: 620px) { .rc__g { grid-template-columns: 1.15fr 1fr; } }
.rc__b {
  position: relative;
  padding: 1rem 1.1rem;
  border-radius: 16px 5px 16px 5px;
  background: var(--bg-0);
}
.rc__b--roi { background: #111214; }
.rc__k {
  display: block; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-muted);
}
.rc__b--roi .rc__k { color: #B3ACA1; }
.rc__f { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.rc__av { font-size: .88rem; color: var(--color-muted); text-decoration: line-through; text-decoration-color: rgba(107,87,72,.45); }
.rc__fl { color: var(--acc-txt); font-weight: 700; }
.rc__ap { font-size: .95rem; font-weight: 600; color: var(--color-brand-dark); }
.rc__mult {
  position: absolute; top: .8rem; right: 1rem;
  padding: .18em .55em;
  border-radius: 999px;
  background: var(--acc-deep); color: #fff;
  font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rc__n {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600;
  letter-spacing: -.035em; line-height: 1;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.rc__d { display: block; margin-top: .5rem; font-size: .78rem; line-height: 1.45; color: #CFC9BF; }
.rc__hyp { margin: .9rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--color-muted); }

/* ============================================================
   VIDÉOS PRODUIT : jamais rognées
   Les cadres médias imposaient leur format (4/3) à la source par
   `object-fit: cover`, qui recadre. Sur une vidéo tournée en 16/9,
   cela amputait les côtés — le robot sortait du champ et le
   filigrane easytoclean.co était coupé.

   Deux corrections :
   1. un cadre qui contient une vidéo prend le format 16/9, celui
      des prises de vue ; les cadres qui contiennent une image
      gardent leur 4/3 d'origine ;
   2. la vidéo est affichée en `contain` : l'image entière reste
      visible quel que soit son format. Les sources 16/9 remplissent
      alors le cadre exactement, sans bande ; une source carrée est
      posée sur un fond sombre plutôt que d'être amputée.
   ============================================================ */
.rf-frow__media:has(video),
.why-band__media:has(video),
.proc__frame:has(video) { aspect-ratio: 16 / 9; }

/* les sélecteurs reprennent la profondeur des règles d'origine
   (`.rf-reel .video-loop video`) : à spécificité égale, c'est la
   dernière déclarée qui l'emporte. */
.rf-reel .video-loop video,
.rf-frow__media .video-loop video,
.why-band__media .video-loop video,
.proc__frame .video-loop video,
.rf-reel video,
.rf-frow__media video,
.why-band__media video,
.proc__frame video,
.video-loop .video-loop__media {
  object-fit: contain;
  background: #111214;
}

/* Exception : un fond de hero n'est pas une vidéo produit. Il doit
   remplir toute la hauteur du bandeau, sinon le 16/9 de la source
   laisse une bande sombre au-dessus et au-dessous. Le sélecteur est
   plus profond que le fourre-tout ci-dessus, donc il l'emporte. */
.page-service__hero__media .video-loop .video-loop__media,
.page-service__hero__media .video-loop video,
.page-service__hero__media > .video-loop {
  object-fit: cover;
  background: transparent;
}

/* ------------------------------------------------------------
   Films longs : lecteur au clic plutôt que fond en boucle
   Les captures courtes (10 à 25 s) restent en lecture automatique
   au défilement. Les films promotionnels (50 s et plus) passent
   par `.video-player` : seul le poster est chargé, la vidéo ne
   descend qu'à la demande du visiteur.

   Le lecteur s'insère dans les mêmes cadres médias que les boucles.
   Le sélecteur `:has(video)` ne peut pas les reconnaître, puisque
   la balise <video> n'est créée qu'au clic : on ajoute donc
   `:has(.video-player)`, et le lecteur imbriqué abandonne sa
   largeur et ses arrondis propres pour épouser le cadre.
   ------------------------------------------------------------ */
.rf-frow__media:has(.video-player),
.why-band__media:has(.video-player),
.proc__frame:has(.video-player) { aspect-ratio: 16 / 9; }

.rf-frow__media .video-player,
.why-band__media .video-player,
.proc__frame .video-player {
  max-width: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* comme les boucles, le film n'est jamais rogné */
.video-player video { object-fit: contain; }

/* ------------------------------------------------------------
   Chiffres clés du hero des fiches modèle
   `.robot-keyspec__v` et `__k` fixaient des couleurs sombres
   (bleu nuit et brun) héritées d'un usage sur fond clair. Or ce
   bloc n'existe que dans le hero cinéma, une photo sombre voilée
   de bleu nuit : les trois chiffres y étaient illisibles, seuls
   éléments sombres au milieu d'un texte blanc.

   On reprend le contraste des autres textes du hero : blanc pour
   la valeur, blanc atténué pour l'intitulé.
   ------------------------------------------------------------ */
.page-service__hero--cinema .robot-keyspec__v { color: #fff; }
.page-service__hero--cinema .robot-keyspec__k { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------
   Hero de la page « Nos robots » : vidéo de fond
   Le cadre `.sector-hero__media` peignait un voile bleu nuit et la
   photo dans la même déclaration `background-image`. Un enfant se
   dessinant toujours au-dessus du fond de son parent, y glisser une
   vidéo aurait masqué le voile — et le titre blanc serait devenu
   illisible sur les zones claires du plan.

   Le voile est donc redéployé en `::after`, au-dessus de la vidéo.
   La photo reste dans le fond du parent : elle sert de repli avant
   le chargement et en mouvement réduit, où la vidéo est masquée.

   `cover` et non `contain` ici : c'est un fond plein cadre sur
   lequel court le texte. Des bandes noires y feraient un défaut,
   là où sur une vidéo produit elles préservent l'image entière.
   ------------------------------------------------------------ */
.sector-hero__media .video-loop {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sector-hero__media .video-loop .video-loop__media { object-fit: cover; }

.sector-hero--media:has(.sector-hero__media .video-loop) .sector-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(27, 28, 30, .82), rgba(27, 28, 30, .45) 62%, rgba(27, 28, 30, .25));
}

/* ============================================================
   « NOTRE RÉPONSE » : le déroulé en 5 étapes, en carrousel
   Les pages secteurs affichaient chacune cinq arguments rédigés
   pour elles. On y substitue le déroulé commun de « Comment ça
   marche », identique partout : le visiteur retrouve la même
   promesse de service quel que soit son secteur d'entrée.

   Le défilement horizontal reprend celui des cas concrets
   (.cases--car) : même inertie, même barre, mêmes repères.
   La grille en cinq colonnes serrait trop les visuels ; en
   carrousel, chaque étape garde une photo lisible.
   ============================================================ */
.proc-car {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  padding-bottom: .9rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-light) rgba(255, 255, 255, .16);
}
.proc-car::-webkit-scrollbar { height: 6px; }
.proc-car::-webkit-scrollbar-track { background: rgba(255, 255, 255, .16); border-radius: 3px; }
.proc-car::-webkit-scrollbar-thumb { background: var(--color-brand-light); border-radius: 3px; }
.proc-car:focus-visible { outline: 3px solid var(--color-brand-light); outline-offset: 4px; }

.proc-car__step {
  flex: 0 0 min(80%, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.proc-car__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #111214;
}
.proc-car__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* le numéro se pose sur la photo, il n'ampute pas le texte */
.proc-car__n {
  position: absolute;
  left: .7rem;
  top: .7rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acc-deep);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.proc-car__body { padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.proc-car__step h3 { color: #fff; font-size: 1rem; margin: 0 0 .4rem; line-height: 1.25; }
.proc-car__step p { color: rgba(232, 241, 251, .78); font-size: .85rem; line-height: 1.5; margin: 0 0 .8rem; }
.proc-car__dur {
  margin-top: auto;
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-brand-light);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  padding: .28em .8em;
}
.proc-car__hint { margin: .9rem 0 0; font-size: .78rem; color: rgba(232, 241, 251, .6); }

@media (min-width: 900px) {
  .proc-car__step { flex-basis: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-car { scroll-behavior: auto; }
}

/* ============================================================
   PROXIMITÉ : un seul interlocuteur, du devis à la maintenance
   Remplace un bandeau vidéo décoratif par un argument. La force
   du modèle ne se voit pas sur une image : elle tient à qui se
   déplace. On la montre donc en confrontant deux chaînes.

   À gauche, la chaîne habituelle : quatre maillons, et le dernier
   découvre le site. Les maillons sont ternes et reliés par un
   trait qui s'interrompt, pour donner à voir la perte de mémoire
   d'un intervenant à l'autre. À droite, un seul bloc plein, en
   rouille : la même personne porte les trois rôles.
   ============================================================ */
.proxi { background: var(--bg-warm); }
.proxi__cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: stretch;
  margin-bottom: 1.8rem;
}
.proxi__col {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  display: flex;
  flex-direction: column;
}
.proxi__col--new { border-color: var(--acc-txt); box-shadow: var(--shadow-sm); }

.proxi__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
  background: var(--color-line);
  color: var(--color-muted);
}
.proxi__col--new .proxi__tag { background: var(--acc-deep); color: #fff; }

/* la chaîne habituelle : des maillons reliés, mais qui se délitent */
.proxi__chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.proxi__chain li {
  position: relative;
  padding: .6rem .8rem .6rem 2.4rem;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--color-muted);
  counter-increment: maillon;
}
.proxi__chain { counter-reset: maillon; }
.proxi__chain li::before {
  content: counter(maillon);
  position: absolute;
  left: .7rem; top: 50%;
  transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-line);
  color: var(--color-muted);
  font-size: .7rem; font-weight: 700;
}
/* le trait de liaison, de plus en plus pâle : la mémoire du dossier se perd */
.proxi__chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.32rem; top: 100%;
  width: 1px; height: .55rem;
  background: var(--color-line);
}
.proxi__chain li:nth-child(3) { opacity: .78; }
.proxi__chain li:nth-child(4) { opacity: .58; }

/* le bloc unique */
.proxi__one {
  border: 2px solid var(--acc-deep);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--acc-wash);
}
.proxi__one__who {
  display: block;
  font-weight: 700;
  color: var(--sand-ink);
  font-size: 1.02rem;
  margin-bottom: .1rem;
}
.proxi__one__sub { display: block; font-size: .82rem; color: var(--color-muted); margin-bottom: .8rem; }
.proxi__roles { display: grid; gap: .45rem; }
.proxi__roles span {
  position: relative;
  padding-left: 1.4rem;
  font-size: .88rem;
  color: var(--sand-ink);
  font-weight: 500;
}
.proxi__roles span::before {
  content: "";
  position: absolute;
  left: .3rem; top: .52em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--acc-deep);
}
.proxi__note { margin: 1rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--color-muted); }
.proxi__col--new .proxi__note { color: var(--sand-ink); }

/* les preuves chiffrées de l'ancrage */
.proxi__facts {
  list-style: none; margin: 0; padding: 0;
  /* le nombre de preuves peut varier : les colonnes s'ajustent
     au lieu de laisser une case vide */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
}
.proxi__facts li {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--color-muted);
}
.proxi__facts b {
  display: block;
  font-size: 1.35rem;
  color: var(--acc-txt);
  line-height: 1.1;
  margin-bottom: .2rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .proxi__cmp { grid-template-columns: 1fr; }
  .proxi__facts { grid-template-columns: 1fr; }
}

/* la grille des régions, rapatriée dans le bloc proximité :
   les treize liens ferment la démonstration en montrant le maillage */
.proxi__map { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.proxi__map__t {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 .9rem;
}

/* Régions couvertes sans page dédiée : même carte, mais rien à cliquer.
   Le survol ne doit pas promettre un lien qui n'existe pas. */
.sector-card--static { cursor: default; }
.sector-card--static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------
   « Ce que nous nettoyons » : le détail se déplie
   Les deux pavés par type de zone faisaient à eux seuls la moitié
   du texte de la section. Ils décrivent utilement le métier et
   portent le vocabulaire que cherchent les moteurs : on les garde
   dans la page, mais repliés. Le visiteur voit d'abord les quatre
   prestations et les étiquettes de sols et de salissures, qui se
   parcourent d'un regard ; il ouvre s'il veut le détail.
   ------------------------------------------------------------ */
.cross-more { margin-bottom: 2.4rem; }
.cross-more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--acc-txt);
  padding: .55em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: #fff;
}
.cross-more > summary::-webkit-details-marker { display: none; }
.cross-more > summary::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
}
.cross-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cross-more > summary:hover { border-color: var(--acc-txt); }
.cross-more > summary:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 3px; }
.cross-more .cross { margin-top: 1.2rem; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .cross-more > summary::after { transition: none; }
}

/* ------------------------------------------------------------
   Étiquettes de sols et de salissures, dans le dépliant
   Deux défauts introduits en repliant la section : les pavés
   avaient perdu leur marge basse, si bien que les étiquettes
   leur collaient ; et les colonnes d'étiquettes, sans retrait,
   commençaient 1,5 rem à gauche du texte des pavés au-dessus,
   alors que les deux grilles partagent les mêmes colonnes.

   On leur donne le même traitement de carte qu'aux pavés : le
   texte s'aligne alors exactement, et les quatre blocs du
   dépliant forment une grille cohérente de deux sur deux.
   ------------------------------------------------------------ */
.cross-more .cross { margin-bottom: 1.4rem; }

.cross-more .matrix-col {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
}
.cross-more .matrix-col h3 { margin-top: 0; }

/* Signature d'un vrai témoignage : nom, fonction, établissement.
   Trois niveaux de lecture au lieu d'une fonction anonyme. */
.rc__q cite { display: block; line-height: 1.4; }
.rc__q cite b { display: block; color: var(--color-brand-dark); font-weight: 700; }
.rc__q cite span { display: block; font-weight: 500; }
.rc__q cite .rc__org { color: var(--acc-txt); font-weight: 600; }

/* Note de bas de bloc, sous une liste de rassurance : plus discrète
   que le paragraphe d'introduction, elle porte le lien vers la démo. */
.rf-frow__note {
  margin: 1.2rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.rf-frow__note a { color: var(--acc-txt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   LA GAMME, page « Nos robots » : fiches en bandeau horizontal
   La page d'accueil présente déjà les huit machines en cartes
   verticales, photo au-dessus du texte, et les pages secteurs
   reprennent ce format. Le répéter ici ne dirait rien de neuf.

   Sur cette page, la gamme n'est pas une vitrine mais un
   catalogue : on cherche un modèle, on compare des chiffres.
   Chaque robot prend donc une ligne entière — photo à gauche,
   caractéristiques alignées à droite. Les valeurs se lisent en
   colonne d'une machine à l'autre, ce qu'une grille de cartes
   ne permet pas.
   ============================================================ */
.gp + .sector-cards-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-bottom: 2.6rem;
}

.gp + .sector-cards-grid__grid .robot-card {
  display: grid;
  grid-template-columns: clamp(150px, 22%, 230px) 1fr;
  align-items: stretch;
  border-radius: var(--radius-md);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.gp + .sector-cards-grid__grid .robot-card:hover {
  transform: none;
  border-color: var(--acc-txt);
  box-shadow: var(--shadow-sm);
}

/* la photo occupe toute la hauteur de la ligne */
.gp + .sector-cards-grid__grid .robot-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 130px;
}

/* le corps se déploie en trois zones : identité, chiffres, lien */
.gp + .sector-cards-grid__grid .robot-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titre  chiffres"
    "desc   chiffres"
    "lien   chiffres";
  align-items: center;
  gap: .3rem 1.6rem;
  padding: 1.1rem 1.4rem;
}
.gp + .sector-cards-grid__grid .robot-card__title { grid-area: titre; align-self: end; }
.gp + .sector-cards-grid__grid .robot-card__desc  { grid-area: desc; flex: none; }
.gp + .sector-cards-grid__grid .robot-card__arrow { grid-area: lien; align-self: start; }

/* les chiffres en colonne : ils s'alignent d'une machine à l'autre */
.gp + .sector-cards-grid__grid .robot-card__specs {
  grid-area: chiffres;
  display: grid;
  gap: .3rem;
  margin: 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--color-line);
  min-width: 8.5rem;
}
.gp + .sector-cards-grid__grid .robot-card__spec {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--acc-txt);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 720px) {
  .gp + .sector-cards-grid__grid .robot-card { grid-template-columns: 1fr; }
  .gp + .sector-cards-grid__grid .robot-card__media { aspect-ratio: 16 / 9; min-height: 0; }
  .gp + .sector-cards-grid__grid .robot-card__body {
    grid-template-columns: 1fr;
    grid-template-areas: "titre" "desc" "chiffres" "lien";
    gap: .5rem;
  }
  .gp + .sector-cards-grid__grid .robot-card__specs {
    grid-auto-flow: column;
    justify-content: start;
    gap: 1rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: .6rem;
  }
  .gp + .sector-cards-grid__grid .robot-card__spec { text-align: left; }
}

/* ------------------------------------------------------------
   La gamme par famille, sur la page « Nos robots »
   Mêmes cartes que sur la page d'accueil, mais réparties en deux
   bandes : nettoyage à sec, puis sec et humide. Le défilement
   piloté par la page reste réservé à l'accueil — ici, sans
   `.gm__piste`, le script s'arrête de lui-même et les bandes
   défilent nativement, avec accroche. Le survol, lui, est en CSS
   pur : il fonctionne à l'identique dans les deux cas.
   ------------------------------------------------------------ */
.gm__fam { max-width: 1180px; margin-top: 2.2rem; margin-bottom: 1rem; }
.gm__fam:first-of-type { margin-top: 0; }
.gm__fam__t {
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--sand-ink);
}
.gm__fam__s {
  margin: 0;
  max-width: 52rem;
  color: var(--sand-muted);
  font-size: .93rem;
  line-height: 1.6;
}
/* deux bandes se suivent : un peu d'air entre elles */
.gm__bande + .gm__fam { margin-top: 2.6rem; }

/* ============================================================
   .gm--fiches : la gamme lisible sans survol
   Sur l'accueil, la carte est une vitrine : une photo plein cadre,
   les caractéristiques cachées derrière un panneau qui monte au
   survol. Ici, le visiteur vient comparer des machines, pas les
   découvrir : tout doit être lisible d'un regard, et au doigt sur
   mobile, où le survol n'existe pas.

   Deux changements : la photo passe en `contain` sur fond navy,
   donc le robot est vu en entier au lieu d'être recadré ; et le
   panneau de détails est posé à demeure sous la photo, sans
   translation ni transition.
   ============================================================ */
.gm--fiches .gm__carte {
  height: auto;
  width: clamp(268px, 27vw, 330px);
  display: flex;
  flex-direction: column;
  background: #111214;
}

/* le robot en entier : rien n'est rogné */
.gm--fiches .gm__photo {
  position: relative;
  inset: auto;
  aspect-ratio: 16 / 9;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #111214;
  transform: none !important;
}

/* les repères du mode survol n'ont plus d'objet */
.gm--fiches .gm__socle,
.gm--fiches .gm__pouce { display: none; }

/* le panneau de détails devient le corps de la carte */
.gm--fiches .gm__detail {
  position: relative;
  inset: auto;
  transform: none !important;
  transition: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.2rem;
}
.gm--fiches .gm__desc { flex: 1; }
.gm--fiches .gm-spec { margin-bottom: .8rem; }

/* plus rien ne bouge au survol, seule la bordure répond */
.gm--fiches .gm__carte { border: 1px solid transparent; transition: border-color .3s ease; }
.gm--fiches .gm__carte:hover,
.gm--fiches .gm__carte:focus-within { border-color: var(--acc-txt); }

/* ------------------------------------------------------------
   .gm--fiches : la gamme dans les tons sable de la charte
   Le bleu nuit de l'accueil sert un plein cadre photographique,
   où il fait fond de studio. Étendu à toute la carte, il durcit
   la lecture : huit blocs sombres alignés donnent un catalogue
   de machines lourdes, alors que l'argument est l'inverse.

   On repasse donc sur l'échelle chaude : carte blanche cernée
   d'un filet sable, encre brune, valeurs en rouille, et le
   bandeau photo posé sur le sable clair plutôt que sur le navy.
   ------------------------------------------------------------ */
.gm--fiches { background: var(--bg-warm); }

.gm--fiches .gm__carte {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.gm--fiches .gm__carte:hover,
.gm--fiches .gm__carte:focus-within {
  border-color: var(--acc-txt);
  box-shadow: var(--shadow-lift);
}

/* le bandeau photo : fond sable, la machine s'y détache sans dureté */
.gm--fiches .gm__photo { background-color: var(--acc-wash); }

.gm--fiches .gm__detail { background: var(--bg-0); }
.gm--fiches .gm__famille { color: var(--acc-txt); }
.gm--fiches .gm__nom { color: var(--sand-ink); }
.gm--fiches .gm__punch { color: var(--acc-txt); font-weight: 600; }
.gm--fiches .gm__desc { color: var(--sand-muted); }

.gm--fiches .gm-spec li { border-top-color: var(--color-line); }
.gm--fiches .gm-spec__k { color: var(--sand-muted); }
.gm--fiches .gm-spec__v { color: var(--sand-ink); }
.gm--fiches .gm__lien { color: var(--acc-txt); }

/* le label de gamme, lisible sur fond clair */
.gm--fiches .gm__label {
  background: var(--color-brand-light);
  color: var(--sand-ink);
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   .gm--fiches, réglage du contraste
   Première version trop délavée : fond de section, carte et
   bandeau photo tenaient dans un mouchoir de poche entre #F6F4F1
   et #FFFFFF. Trois tons quasi identiques, donc aucune hiérarchie
   et une impression de brouillard.

   On écarte les paliers sans revenir au bleu nuit : le bandeau
   photo prend le sable franc de la charte, les chiffres passent
   en rouille et s'appuient sur un fond légèrement teinté. La carte
   retrouve du relief tout en restant claire.
   ------------------------------------------------------------ */

/* palier 1 : le bandeau photo, sable franc plutôt que sable lavé */
.gm--fiches .gm__photo { background-color: var(--color-brand-light); }

/* palier 2 : le bloc de chiffres, détaché du texte courant */
.gm--fiches .gm-spec {
  background: var(--bg-warm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  margin-bottom: .9rem;
}
.gm--fiches .gm-spec li { border-top-color: rgba(184, 148, 0, .14); }
.gm--fiches .gm-spec li:first-child { border-top: 0; padding-top: 0; }

/* les valeurs portent la couleur : c'est ce qu'on vient comparer */
.gm--fiches .gm-spec__v { color: var(--acc-txt); font-weight: 700; }
.gm--fiches .gm-spec__k { color: var(--sand-muted); }

/* le nom garde le poids de l'encre brune, la punchline reste rouille */
.gm--fiches .gm__nom { color: var(--sand-ink); font-weight: 700; }

/* un liseré rouille en pied de carte, qui se révèle au survol */
.gm--fiches .gm__carte { border-bottom: 3px solid var(--color-brand-light); }
.gm--fiches .gm__carte:hover,
.gm--fiches .gm__carte:focus-within { border-bottom-color: var(--acc-txt); }

/* ------------------------------------------------------------
   Famille épinglée : la page attend que la bande ait fini
   Tant que les cinq machines ne sont pas toutes passées, la page
   ne descend pas. Le conteneur `.gm__pin` reçoit du script une
   hauteur égale à la course horizontale plus une fenêtre ; sa vue
   reste collée en haut pendant toute cette distance, et le ruban
   avance d'autant. Une fois la dernière carte atteinte, la page
   repart normalement.

   Sans script, ou en mouvement réduit, rien n'est épinglé : la
   bande reste défilable horizontalement de façon native.
   ------------------------------------------------------------ */
.gm--fiches .gm__pin.is-pilote .gm__pin__vue {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.gm--fiches .gm__pin.is-pilote .gm__bande {
  overflow: hidden;
  scroll-snap-type: none;
  padding-bottom: 0;
}
.gm--fiches .gm__pin.is-pilote .gm__ruban { will-change: transform; }

/* ------------------------------------------------------------
   Distinguer les deux familles
   Les deux bandes s'enchaînaient sur le même fond, avec le même
   traitement de titre : à l'écran, on ne voyait qu'une longue
   suite de huit cartes. Chaque famille reçoit donc sa propre
   bande de fond, un titre porté par un filet rouille et le
   nombre de machines qu'elle contient.
   ------------------------------------------------------------ */
.gm--fiches .gm__pin { padding: 2.6rem 0 3rem; }
.gm--fiches .gm__pin:nth-of-type(odd)  { background: var(--bg-warm); }
.gm--fiches .gm__pin:nth-of-type(even) { background: var(--bg-0); }

/* le titre de famille : filet rouille au-dessus, compteur à droite */
.gm--fiches .gm__fam { margin-top: 0; margin-bottom: 1.3rem; }
.gm--fiches .gm__fam__t {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 0 0 .4rem;
  padding-top: .9rem;
  border-top: 3px solid var(--acc-deep);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}
.gm--fiches .gm__fam__n {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-txt);
  background: var(--acc-wash);
  border-radius: var(--radius-pill);
  padding: .3em .8em;
}

/* sur fond blanc, la carte s'appuie sur son filet plutôt que sur le contraste */
.gm--fiches .gm__pin:nth-of-type(even) .gm__carte { border-color: var(--color-line); }

/* ============================================================
   « La preuve par l'usage »
   Deux séquences, deux régimes de lecture. Le ramassage dure dix
   secondes : il boucle en silence, on saisit la démonstration
   d'un coup d'œil. Le cycle d'entretien en dure quarante-cinq :
   c'est un film qu'on choisit de regarder, donc un lecteur au
   clic, qui ne télécharge rien avant qu'on le demande.
   ============================================================ */
.preuve { background: var(--bg-warm); }
/* deux vidéos par rangée, jamais trois : chacune doit rester assez
   grande pour qu'on distingue ce qu'elle démontre */
.preuve__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.preuve__g + .preuve__rapport { margin-top: clamp(1.2rem, 2.6vw, 2rem); }
.preuve__rapport + .preuve__g { margin-top: clamp(1.2rem, 2.6vw, 2rem); }
@media (max-width: 760px) {
  .preuve__g { grid-template-columns: 1fr; }
}
.preuve__c {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding-bottom: 1.3rem;
}
.preuve__media { position: relative; aspect-ratio: 16 / 9; background: #111214; }
.preuve__media .video-loop { position: absolute; inset: 0; }
.preuve__media .video-player { border-radius: 0; box-shadow: none; max-width: none; height: 100%; }

.preuve__t {
  margin: 1.1rem 1.3rem .4rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sand-ink);
}
.preuve__d {
  margin: 0 1.3rem .9rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sand-muted);
  flex: 1;
}
.preuve__tag {
  align-self: flex-start;
  margin-left: 1.3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-txt);
  background: var(--acc-wash);
  border-radius: var(--radius-pill);
  padding: .3em .8em;
}

/* ------------------------------------------------------------
   Le rapport de passage, en pied du bloc de preuve
   Les quatre séquences prouvent que la machine nettoie. Celui-ci
   prouve l'engagement de service : il donne des chiffres qu'on
   peut verser à un dossier qualité. Il sort donc de la grille et
   prend toute la largeur — un tableau de bord ne se lit pas dans
   une demi-colonne.
   ------------------------------------------------------------ */
.preuve__rapport {
  margin: clamp(1.2rem, 2.6vw, 2rem) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  align-items: center;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.preuve__rapport__img {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-warm);
}
.preuve__rapport__img img { width: 100%; height: auto; display: block; }
.preuve__rapport__txt { margin: 0; }
.preuve__rapport__txt .preuve__t,
.preuve__rapport__txt .preuve__d { margin-left: 0; margin-right: 0; }
.preuve__rapport__txt .preuve__tag { margin-left: 0; margin-bottom: .7rem; display: inline-block; }

.preuve__chiffres { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.preuve__chiffres li {
  font-size: .86rem;
  line-height: 1.4;
  color: var(--sand-muted);
  padding-left: .9rem;
  border-left: 3px solid var(--color-brand-light);
}
.preuve__chiffres b {
  display: block;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--acc-txt);
  font-variant-numeric: tabular-nums;
}

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

/* ============================================================
   Bloc de preuve : cloisonner au lieu d'empiler
   Cinq éléments traités en boîtes blanches identiques donnaient
   une enfilade massive. On casse la répétition en deux temps.

   1. Les vidéos perdent leur cadre. Elles ne sont plus des cartes
      mais des plans posés sur le fond, avec leur légende dessous.
      Le regard voit quatre images, pas quatre boîtes.
   2. Chaque paire reçoit un intertitre. Le rapport, resté seul en
      carte blanche, devient alors la respiration qui sépare les
      deux groupes au lieu d'être un bloc de plus.
   ============================================================ */

/* --- les vidéos : plus de boîte, juste le plan et sa légende --- */
.preuve__c {
  background: none;
  border: 0;
  border-radius: 0;
  padding-bottom: 0;
  overflow: visible;
}
.preuve__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.preuve__t   { margin: .9rem 0 .35rem; }
.preuve__d   { margin: 0 0 .7rem; }
.preuve__tag { margin-left: 0; }

/* --- l'intertitre de groupe --- */
.preuve__grp { margin: 0 0 1.1rem; }
.preuve__grp + .preuve__g { margin-top: 0; }
.preuve__grp__t {
  margin: 0 0 .25rem;
  padding-top: .8rem;
  border-top: 2px solid var(--color-brand-light);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sand-ink);
}
.preuve__grp__s { margin: 0; font-size: .88rem; color: var(--sand-muted); }

/* --- le rapport : seul élément encadré, il fait la césure --- */
.preuve__rapport {
  margin: clamp(2.2rem, 4vw, 3.2rem) 0;
  background: var(--bg-0);
  box-shadow: var(--shadow-sm);
}
.preuve__g + .preuve__rapport,
.preuve__rapport + .preuve__g { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.preuve__rapport + .preuve__grp { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* le rapport devient une catégorie à part entière : son intertitre
   se cale sur les deux autres, et le cadre blanc se resserre sous lui */
.preuve__grp + .preuve__rapport { margin-top: 0; }

/* On respire un peu plus entre les trois catégories : l'écart qui
   précède un intertitre est franchement supérieur à celui qui le
   sépare de ses propres visuels, pour que chaque groupe se lise
   comme un ensemble et non comme une suite continue. */
.preuve__g + .preuve__grp,
.preuve__rapport + .preuve__grp { margin-top: clamp(3rem, 5.5vw, 4.4rem); }
.preuve__grp { margin-bottom: 1.4rem; }
.preuve__grp__t { padding-top: 1rem; }

/* ------------------------------------------------------------
   Flèches du carrousel des étapes
   La mention « faites défiler vers la droite » demandait au
   visiteur de trouver le geste lui-même. Deux boutons le font à
   sa place, posés de part et d'autre de la bande.

   Ils se désactivent aux extrémités plutôt que de disparaître :
   une commande qui s'évanouit fait douter de son existence.
   ------------------------------------------------------------ */
.proc-car__wrap { position: relative; }
.proc-car__wrap .proc-car { scroll-behavior: smooth; }

.proc-car__nav {
  position: absolute;
  top: calc(50% - 1.1rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(17, 18, 20, .86);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.proc-car__nav svg { width: 1.1rem; height: 1.1rem; }
.proc-car__nav--prec { left: -.6rem; }
.proc-car__nav--suiv { right: -.6rem; }
.proc-car__nav--prec svg { transform: rotate(180deg); }

.proc-car__nav:hover { background: var(--acc-deep); border-color: var(--acc-txt); }
.proc-car__nav:focus-visible { outline: 3px solid var(--color-brand-light); outline-offset: 3px; }
.proc-car__nav[disabled] { opacity: .3; cursor: default; }
.proc-car__nav[disabled]:hover { background: rgba(17, 18, 20, .86); border-color: rgba(255, 255, 255, .28); }

@media (max-width: 700px) {
  .proc-car__nav--prec { left: -.2rem; }
  .proc-car__nav--suiv { right: -.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-car__wrap .proc-car { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   Mosaïque des secteurs : des extraits vidéo derrière les tuiles
   Chaque tuile porte trois secondes du secteur qu'elle annonce.
   La balise change, le cadrage non : `.mz__img` couvre déjà la
   tuile, la vidéo s'y range de la même façon.

   Le voile est éclairci. Il devait assombrir une photo fixe ;
   sur une image animée, il écrasait le mouvement au point qu'on
   ne voyait plus rien bouger. On garde de la densité seulement
   au pied de la tuile, là où court le texte.
   ------------------------------------------------------------ */
video.mz__img { background: var(--color-brand-dark); }

.mz__voile {
  background: linear-gradient(180deg,
    rgba(17, 18, 20, 0) 30%,
    rgba(17, 18, 20, .30) 62%,
    rgba(17, 18, 20, .74) 86%,
    rgba(17, 18, 20, .86) 100%);
}
.mz__c:hover .mz__voile,
.mz__c:focus-visible .mz__voile {
  background: linear-gradient(180deg,
    rgba(17, 18, 20, .12) 0%,
    rgba(17, 18, 20, .44) 58%,
    rgba(17, 18, 20, .82) 86%,
    rgba(17, 18, 20, .92) 100%);
}

/* ============================================================
   « Votre interlocuteur » : les visages avant les machines
   Le site répète que la même personne chiffre, installe et
   entretient. Tant qu'elle reste une abstraction, l'argument
   se lit comme une promesse commerciale de plus. Des visages,
   des prénoms et une région le rendent vérifiable.

   Placé haut, juste après les chiffres : le prospect voit qui
   viendra chez lui avant de voir ce qu'on lui vendra.
   ============================================================ */
.eq { background: var(--bg-warm); }

/* Bande defilante plutot que grille : treize visages empiles font un
   pave, surtout sur telephone. En une seule ligne, l'oeil balaie les
   regions comme une liste, et la bande dit d'elle-meme qu'elle
   continue a droite. */
/* --eq-carte sert deux fois : la largeur des fiches et le calage
   vertical des fleches, qui doivent tomber au centre des portraits. */
.eq__wrap { --eq-carte: clamp(122px, 13vw, 156px); --eq-region-h: 2.6rem; position: relative; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.eq__g {
  --eq-jour: clamp(.9rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--eq-jour);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* la bande deborde jusqu'aux bords de l'ecran : une carte coupee
     au bord signale qu'il y en a d'autres, mieux qu'une fleche */
  margin-inline: calc(-1 * var(--pad));
  padding: .4rem var(--pad) 1.1rem;
  scroll-padding-inline: var(--pad);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}
.eq__g::-webkit-scrollbar { height: 6px; }
.eq__g::-webkit-scrollbar-track { background: transparent; }
.eq__g::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }

.eq__c {
  flex: 0 0 var(--eq-carte);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.eq__photo {
  /* span devenu enfant d'un lien en bloc : sans display:block, il
     reste en ligne et ignore width et aspect-ratio — les portraits
     disparaissaient purement et simplement */
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.eq__rond {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--acc-wash);
  /* double anneau : le premier decoupe le portrait du fond sable,
     le second dessine le lisere */
  box-shadow: 0 0 0 3px var(--bg-warm), 0 0 0 4px var(--color-line);
  transition: box-shadow .32s ease, transform .32s var(--ease-out, ease);
}
/* Les portraits fournis sont tous carres : dans un cadre carre, aucun
   recadrage ne s'opere et les photos prises de loin laissent le visage
   minuscule. --z resserre sur le visage, --zx/--zy disent ou il se trouve.
   Regle fiche par fiche dans index.html. */
.eq__rond img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.eq__c:hover .eq__rond {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--bg-warm), 0 0 0 4px var(--acc-deep);
}

/* La region passe devant : c'est par elle que le prospect se
   reconnait. Le prenom vient ensuite, il repond a « qui », pas a
   « est-ce que ca me concerne ». */
/* La region passe au-dessus du portrait : c'est par elle qu'on se
   reconnait, elle doit se lire avant le visage. Sa hauteur est
   reservee (--eq-region-h) pour que tous les portraits s'alignent,
   quelle que soit la longueur du nom de region. */
.eq__region {
  display: block;
  margin: 0 0 .6rem;
  min-height: var(--eq-region-h, 2.6rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(.86rem, 1.05vw, .96rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sand-ink);
  text-wrap: balance;
}
.eq__nom {
  display: block;
  margin: .7rem 0 0;
  font-size: clamp(.82rem, .95vw, .9rem);
  font-weight: 600;
  color: var(--acc-txt);
}
a.eq__c:hover .eq__region { color: var(--acc-txt); }

/* Pastille LinkedIn, en bas a droite du portrait. */
.eq__li {
  position: absolute;
  right: 2%;
  bottom: 2%;
  z-index: 1;
  width: 28%;
  max-width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--bg-warm);
  transition: transform .32s var(--ease-out, ease), background-color .3s ease;
}
.eq__li svg { width: 58%; height: 58%; color: #fff; }
.eq__c:hover .eq__li { transform: translateY(-4px) scale(1.08); background: #004182; }

/* Fleches calees sur le centre des portraits, et non sur celui de la
   bande qui compte aussi les deux lignes de legende. */
.eq__nav {
  position: absolute;
  top: calc(.4rem + var(--eq-region-h, 2.6rem) + .6rem + var(--eq-carte) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--bg-0);
  color: var(--sand-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-sm);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.eq__nav svg { width: 1.1rem; height: 1.1rem; }
/* posees a l'interieur de la bande, sur le bord des portraits : la
   bande deborde jusqu'aux bords de l'ecran, il n'y a pas de marge
   exterieure ou les loger */
.eq__nav--prec { left: calc(-1 * var(--pad) + .3rem); }
.eq__nav--suiv { right: calc(-1 * var(--pad) + .3rem); }
.eq__nav--prec svg { transform: rotate(180deg); }
.eq__nav:hover { background: var(--acc-deep); border-color: var(--acc-txt); color: #fff; }
.eq__nav:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; }
.eq__nav[disabled] { opacity: .28; cursor: default; }
.eq__nav[disabled]:hover { background: var(--bg-0); border-color: var(--color-line); color: var(--sand-ink); }

/* Sur telephone, le doigt fait le travail et les fleches ne feraient
   que masquer deux visages. */
@media (max-width: 700px) { .eq__nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .eq__g { scroll-behavior: auto; } }

/* ------------------------------------------------------------
   Ligne de garanties sous les boutons du hero
   `.hero-stats-inline` est ecrit en brun sourd et son <strong> en
   navy : deux couleurs pensees pour un fond clair. Sur les heros
   video, elles se perdent dans l'image. Sur ces heros seulement,
   la ligne repasse en clair.
   ============================================================ */
.page-service__hero--media .hero-stats-inline { color: rgba(255, 255, 255, .82); }
.page-service__hero--media .hero-stats-inline strong { color: #fff; }

/* ------------------------------------------------------------
   Hero d'accueil : meme gabarit que les heros secteurs
   Il montait a clamp(520px, 72vh, 760px) au-dessus de 900px et a
   clamp(520px, 78vh, 720px) en dessous, quand les pages secteurs
   tiennent en clamp(460px, 64vh, 640px). Reprendre le meme clamp,
   c'est reprendre la meme proportion a toutes les largeurs, pas
   seulement la meme hauteur a une largeur donnee.

   La classe --accueil est portee par le seul hero de la page
   d'accueil : les dix-sept autres heros --cinema gardent le leur.
   ============================================================ */
.page-service__hero--accueil {
  /* Le hero prend tout ce que le bandeau chiffres ne prend pas. La
     valeur de secours suppose un en-tete de 73px ; motion.js la
     remplace par la mesure reelle. */
  min-height: var(--hero-accueil-h, max(420px, calc(100svh - 73px - clamp(118px, 16vh, 158px))));
  /* La regle generique `section` posait 71px de marge en haut et en
     bas. Avec `box-sizing: border-box`, cette marge tient DANS la
     hauteur minimale tant que le contenu ne la depasse pas : elle ne
     coute donc rien. C'est le sous-titre, trop long, qui faisait
     deborder le contenu et poussait le hero a 629px. Sous-titre
     raccourci, on rend au hero une marge confortable. */
  padding-block: clamp(1.6rem, 4vh, 3rem);
}

/* ============================================================
   BANDEAU CHIFFRES — ferme la premiere impression d'ecran
   Le bloc s'epinglait sur toute une hauteur d'ecran au defilement.
   Il devient un bandeau pose sous la bande logos, dont le bas
   tombe exactement sur la ligne de flottaison : le visiteur voit
   le hero, les logos et les trois chiffres, puis plus rien.

   La hauteur est calculee ici en secours ; motion.js l'ajuste au
   pixel en mesurant le hero reellement rendu, qui peut depasser sa
   hauteur minimale quand le titre passe sur trois lignes.
   ============================================================ */
.pv--bandeau {
  background: var(--bg-1);
  border-bottom: 1px solid var(--color-line);
  padding: 0;
  min-height: clamp(118px, 16vh, 158px);
  display: flex;
  align-items: center;
}
.pv--bandeau .pv__in {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  padding-block: clamp(.7rem, 1.5vh, 1.1rem);
}

.pv--bandeau .pv__entete { flex: 0 1 20rem; max-width: 20rem; margin: 0; }
.pv--bandeau .pv__titre {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.12;
  margin: .35rem 0 0;
}

/* trois colonnes egales, sans defilement : il n'y a que trois chiffres */
.pv--bandeau .pv__ruban {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
  width: auto;
  will-change: auto;
}
.pv--bandeau .pv__c {
  width: auto;
  padding: clamp(.7rem, 1.3vw, 1rem) clamp(.85rem, 1.6vw, 1.2rem);
  justify-content: center;
}
.pv--bandeau .pv__v { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.pv--bandeau .pv__n { margin-bottom: .3rem; }
.pv--bandeau .pv__l { font-size: .85rem; line-height: 1.3; }
.pv--bandeau .pv__titre { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }

/* Sous 900px la colonne de titre passe au-dessus et les chiffres
   gardent leur ligne : trois nombres courts y tiennent encore. */
@media (max-width: 900px) {
  .pv--bandeau { min-height: 0; }
  .pv--bandeau .pv__in { flex-direction: column; align-items: stretch; gap: 1rem; }
  .pv--bandeau .pv__entete { flex: none; max-width: none; }
  .pv--bandeau .pv__c { padding: .85rem .9rem; }
  .pv--bandeau .pv__l { font-size: .82rem; }
}

/* ============================================================
   CINQ QUESTIONS — refonte du bloc « garanties »
   Cinq blocs navy identiques, cinq titres ecrits du point de vue
   du vendeur (« Maintenance incluse », « Engagement de resultat ») :
   rien n'accrochait, le lecteur passait.

   Trois deplacements :
   1. la promesse devient la question que l'acheteur se pose deja ;
      on lit son propre doute avant de lire la reponse ;
   2. le chiffre qui repond passe en tete de ligne, gros, en rouille :
      « 72 h » se lit en un dixieme de seconde, pas « Garantie de
      continuite » ;
   3. cinq cartes juxtaposees deviennent un seul panneau raye. Une
      seule forme a lire au lieu de cinq, et les reponses s'alignent
      en colonne : l'oeil descend la colonne des chiffres.
   ============================================================ */
.gr--questions .gr__titre { max-width: 24ch; }
.gr--questions .gr__titre .ho { color: var(--acc-txt); }

/* le panneau : une seule forme, la signature d'angles conservee */
.gr--questions .gr__grille {
  --r: clamp(22px, 3vw, 38px);
  display: block;
  background: #111214;
  border-radius: var(--r) 7px var(--r) 7px;
  overflow: hidden;
  padding: clamp(.4rem, 1vw, .8rem) 0;
}

.gr--questions .gr__i {
  display: grid;
  /* la question d'abord, la reponse ensuite : on lit son doute avant
     de lire ce qui y repond */
  grid-template-columns: 1fr clamp(6.5rem, 11vw, 9.5rem);
  align-items: baseline;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(1.3rem, 2.8vw, 2.2rem);
  background: transparent;
  border-radius: 0;
  transition: background-color .3s ease;
}
/* filet plutot que bordure complete : il ne ferme pas la ligne */
.gr--questions .gr__i + .gr__i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }

/* La reponse, alignee a droite en colonne d'une ligne a l'autre.
   Une seule taille pour toutes : « 72 h » et « Redeployees » ont le
   meme poids a l'oeil, c'est la colonne qui se lit, pas le mot. */
.gr__jeton {
  display: block;
  text-align: right;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

.gr--questions .gr__t {
  margin: 0 0 .4rem;
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.gr--questions .gr__p {
  margin: 0;
  color: #CFC9BF;
  font-size: clamp(.9rem, 1.1vw, .97rem);
  line-height: 1.6;
  max-width: 62ch;
}

@media (hover: hover) {
  .gr--questions .gr__i:hover { background-color: #211E1B; }
  .gr--questions .gr__i:hover .gr__jeton { color: #fff; }
}

.gr__liens {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
}
.gr__liens a { color: var(--acc-txt); font-weight: 600; font-size: .95rem; text-decoration: none; }
.gr__liens a:hover { text-decoration: underline; }

/* Sous 640px, le chiffre passe au-dessus de la question : deux
   colonnes ne laisseraient plus qu'une dizaine de caracteres par ligne. */
/* Sous 640px, la reponse passe sous la question plutot que de
   reduire les deux colonnes a une dizaine de caracteres chacune. */
@media (max-width: 640px) {
  .gr--questions .gr__i { grid-template-columns: 1fr; gap: .5rem; }
  .gr__jeton { text-align: left; }
}

/* la grille en 2 puis 3 colonnes ne concerne plus ce bloc */
@media (min-width: 700px) { .gr--questions .gr__grille { grid-template-columns: none; } }
@media (min-width: 1040px) { .gr--questions .gr__grille { grid-template-columns: none; } }

/* Page « Nos robots » : la ligne de pied sous la gamme a ete retiree.
   Sans elle, la marge basse de la section laissait la derniere rangee
   de fiches flotter au-dessus d'une centaine de pixels de vide. La
   page d'accueil, qui garde sa ligne de pied, garde sa marge. */
.gm:not(:has(.gm__pied)) { padding-bottom: 0; }

/* ============================================================
   HERO DES PAGES RESSOURCES — un seul gabarit
   Le glossaire et la FAQ portaient deja ce hero, ecrit deux fois
   a l'identique (.gl-hero puis .fq-hero). Les autres pages
   d'entree de la rubrique — comparateur, etudes de cas, blog —
   heritaient du hero de service, avec fond video et grande
   hauteur : un gabarit fait pour vendre, pas pour ouvrir une
   liste. `.res-hero` reprend le gabarit du glossaire et le rend
   commun ; .gl-hero et .fq-hero y sont raccordes pour qu'une
   retouche porte partout.
   ============================================================ */
.res-hero, .gl-hero, .fq-hero {
  position: relative;
  background: var(--color-brand-dark);
  color: #EDE8E0;
  padding: 84px 0 60px;
  overflow: hidden;
  text-align: center;
}
.res-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 72% 30%, rgba(255, 210, 0, .16), transparent 48%);
  z-index: 0;
}
.res-hero .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.res-hero .kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-txt);
  margin-bottom: 14px;
}
.res-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  color: #fff;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 14px;
}
.res-hero .em { font-style: normal; color: var(--acc-txt); font-weight: 600; }
.res-hero p { font-size: 17px; color: #EDE8E0; margin: 0 auto; max-width: 60ch; }

/* Les chiffres d'ouverture des etudes de cas, remis a l'echelle du
   gabarit : trois reperes sur une ligne, sous le chapeau. */
.res-hero .hstats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.6rem, 4vw, 3rem);
  margin: 26px 0 0;
  padding: 0;
}
.res-hero .hstats li { display: flex; flex-direction: column; align-items: center; }
.res-hero .hstats__n { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.res-hero .hstats__l { font-size: 13px; color: #B3ACA1; margin-top: 4px; }

/* Les pages d'offre portent des boutons dans leur hero : le gabarit
   les accueille, centres sous le chapeau. */
.res-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
/* le bouton principal est navy par defaut : sur ce fond navy il
   disparaissait purement et simplement */
.res-hero__ctas .btn--primary {
  background: var(--acc-deep);
  border-color: var(--acc-txt);
  color: #fff;
}
.res-hero__ctas .btn--primary:hover { background: var(--acc-darker, #B89400); border-color: var(--acc-darker, #B89400); }
.res-hero__ctas .btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}
.res-hero__ctas .btn--outline:hover { background: #fff; color: var(--color-brand-dark); border-color: #fff; }

/* ============================================================
   PAGES D'OFFRE — direction artistique alignee sur le reste
   Le contenu etait juste, la mise en page restait celle d'un
   document : titres nus, deux listes a puces, cinq pastilles
   numerotees, et un paragraphe de comparaison chiffree que
   personne ne lit jusqu'au bout.

   Trois blocs deja eprouves ailleurs sur le site sont repris ici
   plutot que d'en inventer de nouveaux :
   - le chiffre en filigrane des chapitres secteur, pour les etapes ;
   - le panneau navy a colonne de jetons des « cinq questions »,
     pour la comparaison a cinq ans ;
   - l'opposition visuelle du bloc proximite, pour ce qui est
     compris face a ce qui reste a la charge du client.
   ============================================================ */

/* ---------- en-tetes de section : meme rythme que l'accueil ---------- */
.of__over {
  display: inline-block;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acc-deep);
  border-radius: var(--radius-pill);
  padding: .4em 1em;
  margin-bottom: .9rem;
}
.of__h2 .ho { color: var(--acc-txt); }

/* ---------- ce qui est compris / ce qui reste a votre charge ----------
   Les deux colonnes portaient la meme puce ronde : rien ne disait
   laquelle etait l'argument. La premiere passe en carte pleine avec
   coches, la seconde reste en retrait, sur un ton neutre. */
.of__g { align-items: start; }
.of__b {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.of__b:first-child { box-shadow: inset 4px 0 0 var(--acc-deep); }
.of__b:last-child { background: transparent; border-style: dashed; }
.of__b h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 1rem;
  font-size: 1.08rem;
}
.of__b li { padding-left: 1.7rem; }
/* coche pour ce qui est compris, tiret pour ce qui ne l'est pas :
   deux signes qui se distinguent au premier coup d'oeil */
.of__b:first-child li::before {
  content: "";
  top: .34em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0;
  background: var(--acc-deep);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.of__b:last-child li::before {
  content: "";
  top: .72em;
  width: .8em;
  height: 2px;
  border-radius: 0;
  background: var(--sand-muted, var(--color-muted));
}

/* ---------- les etapes : le chiffre passe en filigrane ----------
   Meme traitement que les chapitres « Vos enjeux » des pages
   secteurs : le numero occupe le coin haut droit, en teinte tres
   claire, aligne d'une carte a l'autre. */
.of__el { counter-reset: etape; }
@media (min-width: 760px) { .of__el { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.of__e {
  counter-increment: etape;
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  padding-right: clamp(3.6rem, 7vw, 5rem);
  transition: border-color .3s ease;
}
.of__e:hover { border-color: var(--acc-txt); }
.of__e::after {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: clamp(.15rem, .7vw, .45rem);
  right: clamp(.3rem, 1vw, .7rem);
  z-index: 0;
  font-size: clamp(3rem, 5.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(184, 148, 0, .12);
  pointer-events: none;
}
.of__en { display: none; }              /* la pastille cede la place au filigrane */
.of__e > div { position: relative; z-index: 1; }
.of__e h4 { margin: 0 0 .35rem; font-size: 1.05rem; }

/* ---------- comparaison a cinq ans : panneau a jetons ----------
   Le paragraphe devient trois lignes ou le chiffre repond avant
   la phrase, comme le bloc des cinq questions de l'accueil. */
.of__cinq {
  --r: clamp(22px, 3vw, 38px);
  background: #111214;
  border-radius: var(--r) 7px var(--r) 7px;
  overflow: hidden;
  padding: clamp(.4rem, 1vw, .8rem) 0;
  margin: 0 0 1.6rem;
}
.of__l {
  display: grid;
  grid-template-columns: clamp(8rem, 16vw, 12rem) 1fr;
  align-items: baseline;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: clamp(1.1rem, 2vw, 1.55rem) clamp(1.3rem, 2.8vw, 2.2rem);
  transition: background-color .3s ease;
}
.of__l + .of__l { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
.of__l:hover { background-color: #211E1B; }
.of__lj {
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.of__lt { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.3; }
.of__lp { margin: 0; color: #CFC9BF; font-size: .92rem; line-height: 1.6; }
@media (max-width: 640px) {
  .of__l { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------- questions frequentes : meme accordeon que les autres ---------- */
.of__f {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0 clamp(1rem, 2vw, 1.4rem);
  transition: border-color .3s ease;
}
.of__f[open] { border-color: var(--acc-txt); }
.of__f summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  font-weight: 600;
  color: var(--color-brand-dark);
}
.of__f summary::-webkit-details-marker { display: none; }
.of__f summary::after {
  content: "";
  position: absolute;
  right: .2rem;
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--acc-deep);
  border-bottom: 2px solid var(--acc-deep);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.of__f[open] summary::after { transform: rotate(-135deg); }
.of__f p { margin: 0 0 1.1rem; color: var(--color-muted); font-size: .95rem; line-height: 1.65; }

/* ---------- /location-ou-achat/ : meme direction que les deux
   pages d'offre. Les classes different (.lo au lieu de .of), le
   traitement est le meme : overline sur chaque section, chiffre en
   filigrane sur les cartes « ce qui ne change pas », et opposition
   franche entre les deux colonnes « dans quel cas choisir quoi ». */
.lo__over {
  display: inline-block;
  font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--acc-deep);
  border-radius: var(--radius-pill); padding: .4em 1em; margin-bottom: .9rem;
}
.lo__h2 .ho { color: var(--acc-txt); }

/* les quatre invariants, numerotes en filigrane */
.lo__cg { counter-reset: inv; }
.lo__c {
  counter-increment: inv;
  position: relative;
  overflow: hidden;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  padding-right: clamp(3.4rem, 6.5vw, 4.6rem);
  transition: border-color .3s ease;
}
.lo__c:hover { border-color: var(--acc-txt); }
.lo__c::after {
  content: counter(inv, decimal-leading-zero);
  position: absolute;
  top: clamp(.15rem, .7vw, .45rem);
  right: clamp(.3rem, 1vw, .7rem);
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  font-weight: 600; line-height: 1;
  color: rgba(184, 148, 0, .12);
  pointer-events: none;
}
.lo__c > * { position: relative; z-index: 1; }

/* les deux cas de figure : la location est l'offre mise en avant,
   elle prend la carte pleine ; l'achat reste en trait pointille */
.lo__q {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.lo__q:first-child { box-shadow: inset 4px 0 0 var(--acc-deep); }
.lo__q:last-child { background: transparent; border-style: dashed; }
.lo__q h3 { margin: 0 0 1rem; font-size: 1.08rem; font-weight: 600; color: var(--acc-txt); }
.lo__q ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lo__q li { position: relative; padding-left: 1.7rem; color: var(--color-muted); font-size: .93rem; line-height: 1.6; }
.lo__q:first-child li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 1.05em; height: 1.05em;
  background: var(--acc-deep);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.lo__q:last-child li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: .8em; height: 2px;
  background: var(--sand-muted, var(--color-muted));
}

/* meme accordeon que les pages d'offre */
.lo__f {
  background: var(--bg-0); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 0 clamp(1rem, 2vw, 1.4rem);
  transition: border-color .3s ease;
}
.lo__f[open] { border-color: var(--acc-txt); }
.lo__f summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0;
  position: relative; font-weight: 600; color: var(--color-brand-dark);
}
.lo__f summary::-webkit-details-marker { display: none; }
.lo__f summary::after {
  content: ""; position: absolute; right: .2rem; top: 1.35rem; width: 10px; height: 10px;
  border-right: 2px solid var(--acc-deep); border-bottom: 2px solid var(--acc-deep);
  transform: rotate(45deg); transition: transform .3s ease;
}
.lo__f[open] summary::after { transform: rotate(-135deg); }
.lo__f p { margin: 0 0 1.1rem; color: var(--color-muted); font-size: .95rem; line-height: 1.65; }

/* Sur /achat-maintenance/, les deux colonnes ne s'opposent pas : la
   vente et le contrat de maintenance sont deux acquis, pas un acquis
   et une reserve. Elles gardent donc toutes deux la carte pleine et
   la coche ; seule la couleur du liseré les distingue. */
.of__g--paire .of__b:last-child {
  background: var(--bg-0);
  border-style: solid;
  box-shadow: inset 4px 0 0 var(--color-brand-dark);
}
.of__g--paire .of__b:last-child h3 { color: var(--color-brand-dark); }
.of__g--paire .of__b:last-child li::before {
  content: "";
  top: .34em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0;
  background: var(--color-brand-dark);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* Page « Nos robots » : la fiche entiere est cliquable.
   La carte est devenue un lien ; le libelle « Fiche technique
   complete » n'est plus qu'un repere visuel, deux <a> imbriques
   etant invalides. Un seul arret de tabulation par robot. */
.gm--fiches a.gm__carte { text-decoration: none; color: inherit; display: flex; cursor: pointer; }
.gm--fiches a.gm__carte:hover .gm__lien,
.gm--fiches a.gm__carte:focus-visible .gm__lien { text-decoration: underline; }
.gm--fiches a.gm__carte:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; }

/* Etude de cas mise en avant : le fond passe de la photo a la video
   du duo CC1 + MT1, qui est exactement le materiel deploye sur ce
   site. Comme pour les heros, un fond doit remplir : la regle
   « contain » des videos produit ne s'y applique pas. */
.vd__photo .video-loop { position: absolute; inset: 0; display: block; }
.vd__photo .video-loop .video-loop__media,
.vd__photo video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;
  display: block;
  transform: scale(1);
  transition: transform .8s var(--ease-out, ease);
}
@media (hover: hover) {
  .vd:hover .vd__photo video { transform: scale(1.04); }
}

/* ============================================================
   FICHES ROBOT — agencement
   Treize sections d'affilee sur fond blanc, dont deux galeries
   collees l'une a l'autre et deux tableaux comparatifs de meme :
   la page se lisait comme un document, sans reperes.

   Deux corrections :
   1. l'ordre — les caracteristiques et les environnements adaptes
      remontent juste apres la premiere galerie. Un acheteur veut
      les chiffres et « est-ce pour mes sols » avant les 1 300 px
      de guide. Au passage, cela separe les deux galeries et les
      deux tableaux, qui ne se suivent plus ;
   2. le rythme — une section sur deux passe en sable, pour que
      l'oeil sache ou il en est. Les sections qui ont deja leur
      fond (offre, bandeau navy, appel final) sont laissees.
   ============================================================ */
.page-robot main > section:nth-of-type(2n+1):not(:first-of-type):not(.bp):not(.mo):not(.doc-cta):not(.service-cta-final) {
  background: var(--bg-1);
}

/* Guide des fiches robot : le chapeau reste visible, le corps se
   deplie. C'est le plus gros bloc de la page — 1 355 px sur la fiche
   MT1 — et le moins lu de bout en bout. */
.rg-guide { margin-top: 1.6rem; border-top: 1px solid var(--color-line); }
.rg-guide summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  font-weight: 600;
  color: var(--acc-txt);
}
.rg-guide summary::-webkit-details-marker { display: none; }
.rg-guide summary::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--acc-deep);
  border-bottom: 2px solid var(--acc-deep);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.rg-guide[open] summary::after { transform: rotate(-135deg); }
.rg-guide__c { padding-bottom: .5rem; }
.rg-guide__c > h3:first-child { margin-top: 0 !important; }

/* ---------- fiches robot : respiration du premier tiers ----------
   Deux resserrements reperes a la mesure :
   1. dans la galerie fusionnee, la boucle video et la grille photo
      se touchaient — zero pixel entre les deux ;
   2. les rangees « Ce qu'il change sur vos sols » se suivaient a
      34 px alors qu'elles pesent 400 px chacune : a cette echelle,
      l'ecart ne se lit plus comme une separation.
   ------------------------------------------------------------ */
.rf-reel + .robot-showcase { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.page-robot .rf-frow { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.page-robot .rf-frow:last-of-type { margin-bottom: 0; }

/* Ligne de garanties sous les boutons du hero ressources : elle porte
   des delais, pas un argument — elle reste discrete et centree. */
.res-hero__ligne {
  margin: 1.4rem auto 0;
  max-width: 46rem;
  font-size: .92rem;
  color: #B3ACA1;
  line-height: 1.6;
}
.res-hero__ligne strong { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------
   Hero « À propos » : un portrait, pas une ambiance
   Le voile du hero cinema est fait pour une vidéo d'atelier, où
   l'image ne porte aucune information : 93 % d'opacité à gauche,
   72 % au milieu. Sur une photo de trois visages, il n'en reste
   rien. Le dégradé garde de quoi tenir le texte blanc sur le
   premier tiers, puis s'efface vite. Le cadrage décale le trio
   vers la droite pour qu'aucun visage ne passe sous le titre.
   ------------------------------------------------------------ */
.page-service__hero--portrait .page-service__hero__media::after {
  /* voile quasi levé : c'est le halo local derrière la colonne de
     texte, plus bas, qui porte la lisibilité. Le visage de gauche
     disparaissait sous un voile fait pour une vidéo, pas pour un
     portrait. */
  background: linear-gradient(90deg,
    rgba(13, 13, 15, .40) 0%,
    rgba(13, 13, 15, .22) 30%,
    rgba(13, 13, 15, .08) 58%,
    rgba(13, 13, 15, .02) 100%);
}
/* le cadre est plus large que la photo n'est haute : c'est le
   reglage vertical qui compte, l'horizontal ne recadre rien */
.page-service__hero--portrait .hero-photo { object-position: center 40%; }
/* le voile allege ne suffit plus a porter le texte : l'ombre prend
   le relais, sans assombrir l'image */
.page-service__hero--portrait .page-service__hero__title,
.page-service__hero--portrait .page-service__hero__subtitle {
  text-shadow: 0 2px 10px rgba(13, 13, 15, .85), 0 1px 3px rgba(13, 13, 15, .9);
}

@media (max-width: 900px) {
  /* en colonne, le texte passe sur toute la largeur : le voile
     redevient vertical, mais deux fois plus léger que par défaut */
  .page-service__hero--portrait .page-service__hero__media::after {
    background: linear-gradient(180deg,
      rgba(13, 13, 15, .32) 0%,
      rgba(13, 13, 15, .55) 45%,
      rgba(13, 13, 15, .82) 100%);
  }
  .page-service__hero--portrait .hero-photo { object-position: 60% 20%; }
}

/* ------------------------------------------------------------
   Page « À propos » : la légende du hero et le bloc groupe
   ------------------------------------------------------------ */
.hero-legende {
  position: absolute;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 3;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 6px rgba(13, 13, 15, .9);
}
@media (max-width: 700px) {
  .hero-legende { position: static; margin: .9rem 0 0; color: rgba(255,255,255,.75); }
}

/* Les trois societes du groupe : celle qu'on lit porte l'accent,
   les deux autres restent en retrait sans etre effacees. */
.grp { background: var(--bg-1); }
.grp__g {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .grp__g { grid-template-columns: repeat(3, 1fr); } }
.grp__c {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  transition: border-color .3s ease, transform .3s var(--ease-out, ease);
}
.grp__c:hover { border-color: var(--acc-txt); transform: translateY(-3px); }
.grp__c--actif { box-shadow: inset 4px 0 0 var(--acc-deep); }
.grp__n {
  display: block;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  color: var(--color-brand-dark);
  margin-bottom: .5rem;
}
.grp__c--actif .grp__n { color: var(--acc-txt); }
.grp__d { margin: 0; color: var(--color-muted); font-size: .95rem; line-height: 1.65; }
.grp__pied {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  text-align: center;
  color: var(--color-muted);
  font-size: .95rem;
}

/* Les deux autres societes du groupe renvoient vers leur site. */
a.grp__n {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  text-decoration: none;
  transition: color .25s ease;
}
a.grp__n:hover { color: var(--acc-txt); text-decoration: underline; }
.grp__ext { font-size: .78em; opacity: .65; }
.grp__c--lien:hover { border-color: var(--acc-txt); }

/* Le chapeau du hero « À propos » se lit sur une photo, pas sur un
   aplat : le beige clair du gabarit n'y tenait pas. Il passe en
   blanc, un cran plus gros, avec un voile local derriere la colonne
   de texte plutot qu'un assombrissement de toute l'image. */
.page-service__hero--portrait .sector-hero__inner { position: relative; }
.page-service__hero--portrait .sector-hero__inner::before {
  content: "";
  position: absolute;
  inset: -1.6rem -3rem -1.6rem -3rem;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(125% 108% at 16% 50%,
    rgba(13, 13, 15, .74) 0%,
    rgba(13, 13, 15, .52) 38%,
    rgba(13, 13, 15, .14) 70%,
    rgba(13, 13, 15, 0) 100%);
  pointer-events: none;
}
.page-service__hero--portrait .page-service__hero__subtitle {
  color: #fff;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  font-weight: 500;
  line-height: 1.62;
}

/* Bande des interlocuteurs fondue dans le bloc proximite : les
   visages arrivent juste apres la promesse, avant la demonstration. */
.proxi__intro {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  color: var(--sand-muted, var(--color-muted));
  font-size: .98rem;
  line-height: 1.6;
}
.proxi .eq__wrap { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------
   Bande fusionnee : chaque fiche porte deux destinations
   La region mene a l'implantation, la pastille au profil LinkedIn.
   Deux liens imbriques etant invalides, la pastille sort du lien
   principal et se cale sur le portrait par le calcul : la photo est
   carree, son cote vaut la largeur de la fiche. */
.eq__c:has(.eq__zone) { position: relative; }
.eq__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.eq__c:hover .eq__zone .eq__region { color: var(--acc-txt); }
.eq__zone:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 4px; border-radius: 10px; }

a.eq__li {
  top: calc(var(--eq-region-h, 2.6rem) + .6rem + var(--eq-carte, 140px) * .66);
  bottom: auto;
  right: 2%;
}
a.eq__li:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.proxi__zones { margin: 0 0 clamp(2rem, 4vw, 3rem); text-align: center; }
.proxi__zones a { color: var(--acc-txt); font-weight: 600; font-size: .95rem; text-decoration: none; }
.proxi__zones a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Implantations : le visage du responsable sur chaque région
   La pastille 📍 disait « quelque part » ; un portrait dit « lui ».
   Le lien LinkedIn sort de la carte cliquable, deux <a> imbriqués
   étant invalides : d'où le conteneur .sector-card-wrap.
   ------------------------------------------------------------ */
.sector-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out, ease);
}
.sector-card-wrap:hover { border-color: var(--acc-txt); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* le bandeau du responsable est hors de la carte cliquable :
   deux liens imbriques cassent le rendu */
.sector-card-wrap > .resp { padding: 1.3rem 1.5rem 0; margin-bottom: 0; }
.sector-card-wrap > .sector-card {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: .9rem;
}
.sector-card-wrap > .sector-card:hover { transform: none; box-shadow: none; }

.resp { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.resp__p {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: visible;
  display: block;
}
.resp__p + .resp__p { margin-left: -14px; }
.resp__rond {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--color-line);
  transition: box-shadow .3s ease;
}
.resp__p img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.resp__p:hover .resp__rond { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--acc-deep); }
.resp__badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg-0);
}
.resp__badge svg { width: 60%; height: 60%; }
.resp__p:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 3px; border-radius: 50%; }

.resp__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.resp__n { font-weight: 700; font-size: .95rem; color: var(--color-brand-dark); }
.resp__r { font-size: .78rem; color: var(--color-muted); }

/* ------------------------------------------------------------
   Pages région : l'interlocuteur dans le hero
   L'encart flottait en haut d'une colonne deux fois plus haute que
   lui, en carte blanche sur fond clair : rien ne le tenait. Il est
   maintenant centré face au texte, en navy, avec la signature
   d'angles du site. Le nom passe devant, la fonction en surtitre.
   ------------------------------------------------------------ */
.page-service__hero__inner--resp {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* la colonne est plus large que l'encart, qui se cale a gauche :
     il se rapproche du texte au lieu de coller au bord */
  .page-service__hero__inner--resp { grid-template-columns: minmax(0, 1fr) clamp(250px, 30vw, 350px); }
  .hresp { justify-self: start; width: clamp(210px, 24vw, 268px); }
}
.hresp {
  --r: clamp(20px, 3vw, 30px);
  background: #111214;
  color: #fff;
  border: 0;
  border-radius: var(--r) 8px var(--r) 8px;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.2rem, 2.2vw, 1.6rem);
  text-align: center;
  box-shadow: var(--shadow-lift);
}
.hresp__k {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 1.15rem;
  line-height: 1.4;
  text-wrap: balance;
}
.hresp__ph { display: flex; justify-content: center; margin-bottom: .85rem; }
.hresp__p {
  position: relative;
  display: block;
  width: clamp(88px, 10.5vw, 112px);
  aspect-ratio: 1 / 1;
}
.hresp__p + .hresp__p { margin-left: -22px; }
/* Le cadre rond est porte par un conteneur, pas par un clip-path :
   le zoom applique a l'image etirait aussi le masque, et les
   portraits les plus recadres debordaient sur le prenom. */
.hresp__rond {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px #111214, 0 0 0 4px rgba(255, 255, 255, .22);
  transition: box-shadow .3s ease;
}
.hresp__p img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.hresp__p:hover .hresp__rond { box-shadow: 0 0 0 3px #111214, 0 0 0 4px var(--acc); }
.hresp__p:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; border-radius: 50%; }
.hresp__badge {
  position: absolute; right: -2px; bottom: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0a66c2; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px #111214;
}
.hresp__badge svg { width: 58%; height: 58%; }
.hresp__n {
  margin: 0 0 .9rem;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}
.hresp__li { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.hresp__lk {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45em 1em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s ease;
}
.hresp__lk svg { width: .95rem; height: .95rem; }
.hresp__lk:hover { background: #0a66c2; }

/* liste de villes sans lien, quand la page locale n'existe pas encore */
.cities-list--plain li { color: var(--color-muted); }

/* Troisième niveau de bouton : le lien de repli, sans cadre.
   Il sert dans les blocs froids, où l'appel principal est doux
   (« Nous contacter ») et où la démo passe en second rideau. */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--acc-txt);
  box-shadow: none;
  text-decoration: none;
}
.btn--ghost:hover { background: transparent; color: var(--acc-darker, #B89400); text-decoration: underline; }
.service-cta-final .btn--ghost { color: var(--color-brand-light); }
.service-cta-final .btn--ghost:hover { color: #fff; }

/* Le bloc « en exploitation » reprend le surtitre en pastille et le
   mot accentué des autres sections de l'accueil. */
.cs__tete .section-header__overline { margin-bottom: .8rem; }
.cs__titre .ho { color: var(--acc-txt); }

/* Bande régionale : la vidéo se cale sur le haut du texte plutôt que
   sur le centre de la colonne, où elle flottait sous le titre. */
.local-map-band__inner { align-items: start; }

/* L'encart interlocuteur porte son propre appel : écrire à cette
   personne, pas « nous contacter ». */
.hresp__cta {
  display: block;
  margin-top: .85rem;
  padding: .7em 1em;
  border-radius: var(--radius-pill);
  background: var(--acc-deep);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s var(--ease-out, ease);
}
.hresp__cta:hover { background: var(--acc-darker, #B89400); transform: translateY(-2px); }
.hresp__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Les trois repères de la bande régionale tiennent sur une ligne :
   trois colonnes égales, sans retour, et un libellé qui ne dépasse
   jamais deux mots par ligne. */
.local-map-band__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.6rem);
  flex-wrap: nowrap;
}
.local-map-band__stat__num { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; }
.local-map-band__stat__label { display: block; font-size: clamp(.76rem, .95vw, .85rem); line-height: 1.35; }
@media (max-width: 520px) {
  .local-map-band__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
}

/* Page de contact : le bandeau « vous écrivez à … », affiché
   seulement quand le visiteur arrive depuis une page région. */
.cperso {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: .9rem 1.1rem;
  background: var(--bg-1);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--acc-deep);
  border-radius: var(--radius-md);
}
.cperso[hidden] { display: none; }
.cperso__ph { display: flex; flex: 0 0 auto; }
.cperso__p { display: block; width: 58px; height: 58px; }
.cperso__p + .cperso__p { margin-left: -16px; }
.cperso__p { position: relative; }
.cperso__rond {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--color-line);
}
.cperso__p img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.cperso__k { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acc-txt); }
.cperso__n { margin: .12rem 0 0; font-size: 1.12rem; font-weight: 700; color: var(--color-brand-dark); }
.cperso__r { margin: .08rem 0 0; font-size: .85rem; color: var(--color-muted); }

/* ------------------------------------------------------------
   Page « À propos » : la méthode et la franchise
   Deux blocs qui portent le même argument que le reste du site,
   mais du point de vue du service rendu, pas du produit vendu.
   ------------------------------------------------------------ */
.meth { background: var(--bg-1); }
.meth__l {
  counter-reset: etape;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 820px) { .meth__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meth__i {
  counter-increment: etape;
  position: relative;
  overflow: hidden;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  padding-right: clamp(3.4rem, 6.5vw, 4.8rem);
  transition: border-color .3s ease;
}
.meth__i:hover { border-color: var(--acc-txt); }
.meth__i::after {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: clamp(.15rem, .7vw, .45rem);
  right: clamp(.3rem, 1vw, .7rem);
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(184, 148, 0, .12);
  pointer-events: none;
}
.meth__t {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: .45rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 700;
  color: var(--color-brand-dark);
  line-height: 1.3;
}
.meth__i p { position: relative; z-index: 1; margin: 0; color: var(--color-muted); font-size: .95rem; line-height: 1.65; }

/* Ce que nous ne faisons pas : trait barré à gauche, ton sobre. */
.franc__g { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 820px) { .franc__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.franc__c {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-brand-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
.franc__c h3 { margin: 0 0 .5rem; font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 700; color: var(--color-brand-dark); line-height: 1.3; }
.franc__c p { margin: 0; color: var(--color-muted); font-size: .95rem; line-height: 1.65; }

/* ------------------------------------------------------------
   Bande des interlocuteurs : deux destinations, deux gestes
   Cliquer le portrait ouvre « Écrire à … ». La pastille LinkedIn
   quitte la photo et se pose à côté du prénom : elle n'a plus
   besoin d'être calée au pixel, et le portrait redevient une
   cible franche.
   ------------------------------------------------------------ */
.eq__zone {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.eq__zone:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 4px; border-radius: 50%; }
.eq__c:hover .eq__rond {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px var(--bg-warm), 0 0 0 4px var(--acc-deep);
}

.eq__pied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .7rem;
}
.eq__pied .eq__nom { margin: 0; }
.eq__c:hover .eq__nom { color: var(--acc-darker, #B89400); }

/* la pastille redevient un simple bouton en ligne */
.eq__pied .eq__li {
  position: static;
  width: 1.35rem;
  height: 1.35rem;
  max-width: none;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: none;
  transition: background-color .25s ease, transform .25s ease;
}
.eq__pied .eq__li svg { width: 62%; height: 62%; }
.eq__pied .eq__li:hover { background: #004182; transform: translateY(-1px); }
.eq__pied .eq__li:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* Sous 900px la bande logos repasse dans le flux et se colle au bas
   du hero : la marge basse du hero se retrouverait alors SOUS elle,
   en bande sombre. Déclaré ici pour passer après padding-block. */
@media (max-width: 900px) {
  .page-service__hero--accueil { padding-bottom: 0; }
}

/* Pastille « enveloppe » sur le portrait : la photo est un lien vers
   « Écrire à X », rien ne le disait. Posée en bas à droite du rond,
   décorative (le lien porte déjà son aria-label). */
.eq__mail {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 30%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acc, #c8551d);
  color: #fff;
  box-shadow: 0 0 0 .18rem #fff, 0 2px 6px rgba(13, 13, 15, .22);
  transition: transform .18s ease;
}
.eq__mail svg { width: 56%; height: 56%; }
.eq__zone:hover .eq__mail,
.eq__zone:focus-visible .eq__mail { transform: scale(1.08); }

/* La region doit se lire avant tout le reste : c'est par elle que le
   prospect se reconnait. Plus grande, plus sombre, cartes elargies
   pour qu'un nom long tienne sur deux lignes maximum. */
.eq__wrap { --eq-carte: clamp(140px, 15vw, 180px); --eq-region-h: 3.1rem; }
.eq__region {
  font-size: clamp(1rem, 1.28vw, 1.16rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--ink, #111214);
}
.eq__nom { font-size: clamp(.9rem, 1.05vw, 1rem); }

/* « À partir de » au-dessus du montant : en suffixe de légende il arrivait
   trop tard, le prix était déjà lu comme ferme. */
.of__pk {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B3ACA1;
}

/* « À partir de » au-dessus du montant dans les deux cartes d'offre :
   la mention doit être lue avant le chiffre, pas après. */
.bp__k {
  display: block;
  margin-bottom: .25rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B3ACA1;
}

/* Bandeau « en chiffres » : la carte prix porte seule un « À partir de ».
   La ligne est réservée sur les trois cartes pour qu'elles restent alignées. */
.pv__c::before {
  content: "";
  display: block;
  height: 1.05em;
  margin-bottom: .38rem;
  font-size: .72rem;
}
.pv__c:has(.pv__k)::before { content: none; }
.pv__k {
  display: block;
  height: 1.05em;
  margin-bottom: .38rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-txt);
}

/* Le surtitre du bloc interlocuteurs porte une information de couverture,
   pas une simple étiquette de section : il est monté d'un cran. */
.eq .section-header__overline {
  font-size: .84rem;
  padding: .42em .95em;
  letter-spacing: .07em;
}

/* Bandeau vidéo pleine largeur : la règle « contain » posée pour les
   vignettes laissait deux bandes sombres de part et d'autre. Ici le
   bandeau EST le média, il doit remplir toute la bande. */
.photo-break__media .video-loop,
.photo-break__media .video-loop__media,
.photo-break__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.photo-break__media { padding: 0; }

/* Groupes multi-sites : le prospect a des établissements dans plusieurs
   régions, il lui faut un nom, pas douze. Carte portrait à droite. */
.gcpt { background: var(--color-bg); }
.gcpt__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.gcpt__h2 {
  margin: .7rem 0 .9rem;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.gcpt__p { margin: 0 0 1.4rem; color: var(--color-muted); max-width: 60ch; }
.gcpt__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.gcpt__carte {
  justify-self: start;
  text-align: center;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.gcpt__p-photo {
  position: relative;
  display: block;
  width: clamp(104px, 13vw, 138px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.gcpt__rond { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.gcpt__rond img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.gcpt__badge {
  position: absolute; right: -2%; bottom: -2%;
  width: 34%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 50%; background: #0a66c2; color: #fff;
  box-shadow: 0 0 0 .18rem var(--color-bg-soft);
}
.gcpt__badge svg { width: 56%; height: 56%; }
.gcpt__nom { margin: .9rem 0 .1rem; font-weight: 700; color: var(--color-ink); }
.gcpt__role { margin: 0 0 .7rem; font-size: .88rem; color: var(--color-muted); }
.gcpt__li { font-size: .86rem; font-weight: 600; color: var(--acc-txt); }
@media (min-width: 900px) {
  .gcpt__in { grid-template-columns: minmax(0, 1fr) clamp(230px, 26vw, 290px); gap: 3rem; }
}

/* Les robots du secteur défilent sur une seule ligne. En grille, la
   quatrième carte tombait seule sur une deuxième rangée et le bloc
   perdait sa lecture. Le dégradé de droite et la barre visible disent
   qu'il reste des cartes. */
.sect-robots__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 34px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: .3rem 0 1.1rem;
  scrollbar-color: var(--acc-txt) rgba(27, 28, 30, .12);
  scrollbar-width: thin;
}
.sect-robots__grid > .robotcard {
  flex: 0 0 clamp(240px, 27vw, 300px);
  scroll-snap-align: start;
}
.sect-robots__grid::-webkit-scrollbar { height: 8px; }
.sect-robots__grid::-webkit-scrollbar-track {
  background: rgba(27, 28, 30, .1);
  border-radius: 999px;
}
.sect-robots__grid::-webkit-scrollbar-thumb {
  background: var(--acc-deep);
  border-radius: 999px;
}
/* le voile de droite s'efface quand on atteint la fin de la piste */
.sect-robots-sec .container { position: relative; }
.sect-robots-sec .container::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1.4rem;
  width: clamp(28px, 5vw, 56px);
  height: calc(100% - 1.4rem);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 246, 240, 0), var(--color-bg-soft));
}

/* Flèches de défilement de la piste robots, calquées sur la bande
   interlocuteurs : elles disent que la ligne continue à droite. */
.sect-robots__wrap { position: relative; }
.sr-nav {
  position: absolute;
  top: calc(50% - 1.4rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: #fff;
  color: var(--acc-txt);
  box-shadow: 0 6px 18px -8px rgba(27, 28, 30, .4);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}
.sr-nav svg { width: 1.05rem; height: 1.05rem; }
.sr-nav--prec { left: calc(-1 * var(--pad) / 2); transform: translateY(-50%) rotate(180deg); }
.sr-nav--suiv { right: calc(-1 * var(--pad) / 2); }
.sr-nav:disabled { opacity: .28; cursor: default; }
.sr-nav[hidden] { display: none; }
@media (hover: hover) {
  .sr-nav:not(:disabled):hover { background: var(--acc-deep); color: #fff; }
}

/* La vidéo d'étude de cas passe bord à bord : c'est la seule image
   animée de cette partie de page, elle doit occuper toute la largeur
   plutôt que d'être posée dans la colonne de texte. */
.cs .vd {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  min-height: clamp(380px, 52vw, 640px);
}
/* le contenu du bloc reste aligné sur la colonne de texte */
.cs .vd__in {
  width: min(var(--container), 100% - 2 * var(--pad));
  margin-inline: auto;
}

/* Le ET1 porte « NOUVEAU », pas un rang de gamme : sa parure passe en
   argent. On redéfinit les variables d'or à l'intérieur de la carte,
   toutes les règles dorées suivent sans être dupliquées. */
.gm__carte--neuf {
  --or: #A7ADB5;
  --or-clair: #F3F0EC;
  --or-metal: linear-gradient(135deg, #8A9099 0%, #F3F0EC 26%, #A7ADB5 52%, #F7F5F2 74%, #949AA3 100%);
}
.gm__carte--neuf .gm__pouce { box-shadow: 0 4px 14px rgba(140, 148, 158, .42); }
.gm__carte--neuf:hover,
.gm__carte--neuf:focus-within { box-shadow: 0 14px 40px -14px rgba(140, 148, 158, .55); }
.gm--fiches .gm__carte--neuf .gm__label { background: var(--or-metal); color: #1F1D1A; }

/* Sur la page « Nos robots », le label de rang reprend l'or de la carte :
   il était resté au sable de la charte, indistinct du fond. */
.gm--fiches .gm__carte--pro:not(.gm__carte--neuf) .gm__label {
  background: var(--or-metal);
  color: #1F1D1A;
}

/* Le MT1 est le modèle le plus déployé : il porte « Best-seller » sur
   l'accueil. Sur la page Nos robots, le socle n'existe pas, il lui faut
   son propre label. Bronze, pour ne pas se confondre avec l'or (le rang)
   ni l'argent (la nouveauté). */
.gm__carte--best {
  --or: #B2703A;
  --or-clair: #EBC8A8;
  --or-metal: linear-gradient(135deg, #8C5527 0%, #EBC8A8 26%, #B2703A 52%, #F2DCC6 74%, #9A5E2C 100%);
}
.gm--fiches .gm__carte--best .gm__label {
  background: var(--or-metal);
  color: #2a1a0e;
}

/* Le label de coin, hors page « Nos robots » : même traitement métal
   que sur les fiches, pour que les trois distinctions se lisent
   pareil d'une page à l'autre. */
.gm__carte--best .gm__label,
.gm__carte--neuf .gm__label,
.gm__carte--pro .gm__label {
  background: var(--or-metal);
  color: #1F1D1A;
  opacity: 1;
  transform: none;
}

/* Le titre du bloc études de cas passe SUR la vidéo. La scène porte le
   plein écran, le titre s'y superpose en haut ; il laisse passer le clic,
   c'est la vidéo entière qui est le lien. */
.cs__scene { position: relative; }
.cs__scene .vd {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
  min-height: clamp(420px, 56vw, 680px);
}
.cs__scene .cs__tete {
  position: absolute;
  top: clamp(1.6rem, 4vw, 3rem);
  left: 0;
  right: 0;
  z-index: 3;
  width: min(var(--container), 100% - 2 * var(--pad));
  margin-inline: auto;
  pointer-events: none;
}
.cs__scene .cs__titre { color: #fff; text-shadow: 0 2px 18px rgba(13, 13, 15, .55); }
.cs__scene .cs__titre .ho { color: var(--color-brand-light); }
/* voile haut : sans lui, le titre blanc tombe parfois sur un plan clair */
.cs__scene .vd::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 15, .74) 0%, rgba(13, 13, 15, .34) 55%, rgba(13, 13, 15, 0) 100%);
}

/* Le titre s'aligne sur le texte de la carte, pas sur la colonne :
   même retrait intérieur que .vd__in, sinon les deux blocs partent
   de deux verticales différentes. */
.cs__scene .cs__tete {
  max-width: none;
  padding-inline: clamp(1.4rem, 3vw, 2.4rem);
  text-align: left;
}
.cs__scene .cs__titre { max-width: 22ch; }

/* La mosaïque suit désormais le bandeau chiffres : il lui faut de l'air
   au-dessus, et son chapeau doit partir de la même verticale que les
   tuiles plutôt que d'être centré sur la page. */
.mz { padding-top: clamp(3.5rem, 7vw, 6rem); }
.mz__tete {
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}
.mz__tete > * { max-width: 40rem; margin-inline: auto; }

/* Le panneau des cinq questions était au navy le plus profond de la
   charte : un cran plus clair, il se détache du fond sans peser. */
.gr--questions .gr__grille { background: #211E1B; }
.gr--questions .gr__i:hover { background-color: #3A2E27; }

/* Les cartes robot des pages secteur portent le même système de labels
   que les cartes de gamme : coin haut gauche, un métal par distinction.
   La mention collée au nom disparaît. */
.robotcard { position: relative; }
.robotcard__label {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  padding: .28em .7em;
  border-radius: var(--radius-pill);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #1F1D1A;
}
.robotcard__label--best {
  background: linear-gradient(135deg, #8C5527 0%, #EBC8A8 26%, #B2703A 52%, #F2DCC6 74%, #9A5E2C 100%);
  color: #2a1a0e;
}
.robotcard__label--neuf {
  background: linear-gradient(135deg, #8A9099 0%, #F3F0EC 26%, #A7ADB5 52%, #F7F5F2 74%, #949AA3 100%);
}

/* Le bouton discret du bandeau final était resté au sable clair, hérité
   de l'époque où ce bandeau avait un fond bleu foncé. Depuis qu'il est
   sable, ce bouton devenait invisible : présent dans la rangée, illisible
   à l'écran, ce qui donnait l'impression que les CTA étaient décentrés. */
.service-cta-final .btn--ghost {
  color: var(--acc-txt);
  border-color: transparent;
}
.service-cta-final .btn--ghost:hover {
  color: var(--sand-ink);
  background: rgba(46, 33, 26, .06);
}

/* Le voile local du hero « À propos » descendait trop bas et couvrait
   le visage du fondateur de gauche. Il se resserre sur la hauteur du
   texte et s'éteint plus tôt vers la droite. */
.page-service__hero--portrait .sector-hero__inner::before {
  inset: -1.2rem -2.4rem -0.6rem -2.6rem;
  background: radial-gradient(108% 82% at 12% 38%,
    rgba(13, 13, 15, .66) 0%,
    rgba(13, 13, 15, .40) 42%,
    rgba(13, 13, 15, .10) 72%,
    rgba(13, 13, 15, 0) 100%);
}

/* La légende revient en bas à droite de la photo, hors du voile. */
.page-service__hero--portrait .hero-legende {
  position: absolute;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  margin: 0;
  z-index: 4;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 8px rgba(13, 13, 15, .95);
}

/* la légende se cale sur le cadre du hero, pas sur la colonne de texte */
.page-service__hero--portrait { position: relative; }

/* Les trois sociétés du groupe s'identifient par leur logotype, pas par
   leur nom composé. Hauteur commune, alignement bas : les trois
   logotypes ont des proportions différentes. */
.grp__n { display: flex; align-items: flex-end; gap: .5rem; min-height: 2.6rem; }
.grp__logo { display: block; width: auto; height: clamp(1.4rem, 2vw, 1.75rem); }
.grp__c--lien .grp__ext { align-self: flex-start; }

/* La mosaïque suit le bandeau chiffres. Une règle « .pv + .mz »
   resserrait le raccord à 2,4 rem, héritée du temps où la mosaïque
   collait au bandeau. On reprend l'espacement de section standard,
   le même que le bloc interlocuteurs qui suit. */
.pv + .mz { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* Les trois logotypes n'ont pas le même rapport hauteur/largeur : on
   cale la hauteur du dessin, pas celle de la boîte. */
.grp__logo { height: clamp(1.5rem, 2.1vw, 1.9rem); }

/* Harmonisation optique des trois logotypes.
   Les trois SVG n'ont pas la même marge interne : à hauteur de boîte
   égale, le mot « easy to compost » paraissait deux fois plus petit
   que « easy to clean ». On règle chaque boîte pour que la HAUTEUR DU
   MOT soit identique, et on compense le blanc résiduel sous le mot
   pour que les trois lignes de base tombent au même endroit.
   Mesures prises sur les tracés : le mot occupe 90,1 % de la boîte
   pour change, 58,1 % pour compost, 99,9 % pour clean. */
a.grp__n, span.grp__n {
  --grp-logo: clamp(18px, 1.5vw, 22px);
  display: flex;
  align-items: flex-end;
  gap: .45rem;
}
.grp__logo { height: auto; width: auto; }
/* hauteur de boîte : le mot occupe 99,9 % de la boîte pour clean,
   90,1 % pour change, 58,1 % pour compost */
.grp__logo--clean   { height: calc(var(--grp-logo) * 1.000); }
.grp__logo--change  { height: calc(var(--grp-logo) * 1.109); }
.grp__logo--compost { height: calc(var(--grp-logo) * 1.721); }
/* et on descend chaque boîte du blanc qu'elle porte sous le mot,
   pour que les trois lignes de base tombent ensemble */
.grp__logo--clean   { transform: translateY(0.05%); }
.grp__logo--change  { transform: translateY(0.56%); }
.grp__logo--compost { transform: translateY(18.95%); }

/* ============================================================
   Comparateur de robots — recherche à facettes
   ------------------------------------------------------------
   Deux colonnes : le rail de critères à gauche, les résultats à
   droite. Le rail colle au scroll, le plateau de comparaison
   colle au bas de l'écran dès qu'un robot est retenu. Sous
   1000px tout repasse en colonne et le rail devient une pile de
   volets repliés.
   ============================================================ */

.cpx { --cpx-r: 14px; }

/* ---- bandeau du haut : recherche, compteur, jauge ---- */
.cpx-tete {
  position: sticky;
  top: 66px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .9rem 1.2rem;
  padding: .8rem 1rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--color-line);
  border-radius: var(--cpx-r);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px -20px rgba(27, 28, 30, .5);
}
.cpx-tete__q { position: relative; display: flex; align-items: center; }
.cpx-tete__loupe {
  position: absolute; left: .7rem; width: 1.05rem; height: 1.05rem;
  color: var(--color-muted); pointer-events: none;
}
.cpx-tete__q input {
  width: 100%;
  padding: .62rem .9rem .62rem 2.4rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font: inherit;
  font-size: .95rem;
  color: var(--color-ink);
}
.cpx-tete__q input:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 1px; }
.cpx-tete__c { margin: 0; font-size: .95rem; color: var(--color-muted); white-space: nowrap; }
.cpx-tete__c strong { font-size: 1.35rem; font-weight: 700; color: var(--acc-txt); font-variant-numeric: tabular-nums; }
.cpx-tete__j {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(27, 28, 30, .1);
  overflow: hidden;
}
.cpx-tete__j span {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), var(--acc-deep));
  transition: width .32s cubic-bezier(.2, .75, .3, 1);
}
.cpx-raz {
  padding: .48em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--acc-txt);
  cursor: pointer;
}
.cpx-raz:hover { background: var(--acc-wash); }

/* ---- corps : rail + résultats ---- */
.cpx-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 1000px) {
  .cpx-corps { grid-template-columns: 268px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .cpx-rail { position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow-y: auto; padding-right: .4rem; }
}
.cpx-rail__t { margin: 0 0 .2rem; font-size: .95rem; font-weight: 700; color: var(--color-ink); }
.cpx-rail__s { margin: 0 0 1rem; font-size: .82rem; line-height: 1.5; color: var(--color-muted); }

.cpx-grp { border-top: 1px solid var(--color-line); }
.cpx-grp__t {
  display: flex; align-items: center; gap: .5rem;
  padding: .78rem 0;
  font-size: .88rem; font-weight: 600; color: var(--color-ink);
  cursor: pointer; list-style: none;
}
.cpx-grp__t::-webkit-details-marker { display: none; }
.cpx-grp__t::after {
  content: ""; margin-left: auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.cpx-grp[open] > .cpx-grp__t::after { transform: rotate(-135deg) translateY(-2px); }
.cpx-grp__n {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3em;
  border-radius: 999px;
  background: var(--acc-deep); color: #fff;
  font-size: .68rem; font-weight: 700;
}
.cpx-grp__c { display: flex; flex-direction: column; gap: .3rem; padding-bottom: .9rem; }

.cpx-case {
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  padding: .46rem .6rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font: inherit; font-size: .86rem; text-align: left;
  color: var(--color-ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.cpx-case__l { flex: 1; min-width: 0; }
.cpx-case__n {
  font-size: .76rem; font-weight: 700;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.cpx-case:hover:not(:disabled) { background: var(--color-bg-soft); }
.cpx-case.is-on {
  background: var(--acc-wash);
  border-color: var(--acc-txt);
  font-weight: 600;
  color: var(--acc-txt);
}
.cpx-case.is-on .cpx-case__n { color: var(--acc-txt); }
.cpx-case:disabled { opacity: .34; cursor: not-allowed; }
.cpx-case:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 1px; }

/* ---- grille de résultats ---- */
.cpx-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: .9rem;
}
.cpx-fiche {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--cpx-r);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cpx-fiche:hover { border-color: var(--acc); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cpx-fiche.is-pris { border-color: var(--acc-txt); box-shadow: inset 0 0 0 1px var(--acc-deep); }
.cpx-fiche__ph {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}
.cpx-fiche__ph img { width: 76%; height: 76%; object-fit: contain; }
.cpx-fiche__ph .cpx-gen { opacity: .38; }
.cpx-fiche__c { flex: 1; padding: .7rem .8rem .4rem; }
.cpx-fiche__f {
  display: inline-block; margin-bottom: .3rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-txt);
}
.cpx-fiche__n { margin: 0; font-size: .96rem; font-weight: 700; line-height: 1.25; }
.cpx-fiche__fab { margin: .1rem 0 .45rem; font-size: .76rem; color: var(--color-muted); }
.cpx-fiche__specs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.cpx-fiche__s {
  padding: .12em .5em;
  border-radius: 999px;
  background: var(--color-bg-soft);
  font-size: .7rem; font-weight: 600; color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.cpx-fiche__b {
  margin: .6rem .8rem;
  padding: .46em 0;
  border: 1px solid var(--acc-deep);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--acc-txt);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cpx-fiche__b:hover { background: var(--acc-deep); color: #fff; }
.cpx-fiche.is-pris .cpx-fiche__b { background: var(--acc-deep); color: #fff; }
.cpx-fiche__l {
  padding: 0 .8rem .7rem;
  font-size: .76rem; font-weight: 600; color: var(--color-muted);
}
.cpx-fiche__l:hover { color: var(--acc-txt); text-decoration: underline; }
.cpx-vide {
  padding: 2.4rem 1.2rem; margin: 0;
  border: 1px dashed var(--color-line);
  border-radius: var(--cpx-r);
  text-align: center; color: var(--color-muted);
  max-width: 46ch; margin-inline: auto;
}

/* ---- plateau de comparaison, collé en bas ---- */
.cpx-pl {
  position: sticky; bottom: 0; z-index: 25;
  margin: 1.6rem calc(-1 * var(--pad)) 0;
  padding: .7rem var(--pad);
  background: rgba(17, 18, 20, .96);
  backdrop-filter: blur(10px);
  color: #fff;
}
.cpx-pl__in {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem;
  max-width: var(--container); margin-inline: auto;
}
.cpx-pl__t { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #B3ACA1; }
.cpx-pl__n { color: #fff; font-variant-numeric: tabular-nums; }
.cpx-pl__l { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; flex: 1; }
.cpx-pl__i {
  display: flex; align-items: center; gap: .4rem;
  padding: .22rem .5rem .22rem .22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .8rem;
}
.cpx-pl__i img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; }
.cpx-pl__x {
  width: 1.2rem; height: 1.2rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: .9rem; line-height: 1; cursor: pointer;
}
.cpx-pl__x:hover { background: var(--acc-deep); }
.cpx-pl__go:disabled { opacity: .45; cursor: not-allowed; }
@keyframes cpx-plein {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.cpx-pl.is-plein .cpx-pl__in { animation: cpx-plein .28s ease; }

/* ---- onglets et tableau ---- */
.cpx-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 2.4rem 0 1rem; }
.cpx-tab {
  padding: .46em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}
.cpx-tab[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.cpx-tab--diff { margin-left: auto; border-style: dashed; }
.cpx-tab--diff[aria-pressed="true"] { background: var(--acc-deep); border-color: var(--acc-txt); }

.cpx-tw { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--cpx-r); }
.cpx-t { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cpx-t th, .cpx-t td { padding: .7rem .9rem; text-align: left; vertical-align: top; }
.cpx-t thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
  font-weight: 700;
}
.cpx-t thead th img { display: block; width: 44px; height: 44px; object-fit: contain; margin-bottom: .3rem; }
.cpx-th__n { display: block; }
.cpx-th__f { display: block; font-size: .74rem; font-weight: 400; color: var(--color-muted); }
.cpx-t tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--color-bg);
  font-weight: 600; color: var(--color-ink);
  min-width: 190px;
  border-right: 1px solid var(--color-line);
}
.cpx-t tbody tr + tr th, .cpx-t tbody tr + tr td { border-top: 1px solid var(--color-line); }
.cpx-varie th, .cpx-varie td { background: var(--acc-wash); }
.cpx-varie th { box-shadow: inset 3px 0 0 var(--acc-deep); }
.cpx-u { font-weight: 400; color: var(--color-muted); }
.cpx-np { color: var(--color-muted); font-style: italic; }
.cpx-leg { margin: .8rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--color-muted); }
.cpx-hint { padding: 1.6rem; margin: 0; color: var(--color-muted); }

@media (max-width: 999px) {
  .cpx-tete { position: static; grid-template-columns: minmax(0, 1fr) auto; }
  .cpx-rail {
    border: 1px solid var(--color-line);
    border-radius: var(--cpx-r);
    padding: 1rem 1.1rem;
    background: var(--color-bg);
  }
}

/* Le contenu de la carte étude de cas remonte un peu : collé au bas du
   cadre plein écran, il passait sous la ligne de flottaison. */
.cs__scene .vd__in { padding-bottom: clamp(2.6rem, 5vw, 4.4rem); }

/* ============================================================
   Formulaire de contact
   ------------------------------------------------------------
   La première question est géographique : c'est elle qui désigne
   la personne. Le portrait apparaît dès qu'une région est cochée,
   avant même que le visiteur ait donné son nom — il sait à qui il
   écrit avant d'écrire.
   ============================================================ */

/* [hidden] doit gagner contre les display des composants */
[hidden] { display: none !important; }

.frm { display: flex; flex-direction: column; gap: 1.9rem; }
.frm-bloc { margin: 0; padding: 0; border: 0; min-width: 0; }

.frm-lg {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  margin-bottom: .35rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--color-ink);
}
.frm-num {
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: var(--acc-deep); color: #fff;
  font-size: .82rem; font-weight: 700;
  box-shadow: 0 4px 12px -6px rgba(184, 148, 0, .8);
}
.frm-aide { margin: 0 0 1rem; font-size: .86rem; line-height: 1.55; color: var(--color-muted); }

/* ---- les régions ---- */
.frm-reg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: .4rem;
}
.frm-reg__b {
  display: flex; align-items: center; gap: .5rem;
  padding: .55em .8em;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
  font: inherit; font-size: .84rem; text-align: left;
  color: var(--color-ink);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.frm-reg__k {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  border: 1.5px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-bg);
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.frm-reg__k::after {
  content: "";
  position: absolute; left: 50%; top: 46%;
  width: .28rem; height: .52rem;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.4);
}
.frm-reg__b:hover { border-color: var(--acc); transform: translateY(-1px); }
.frm-reg__b[aria-pressed="true"] {
  background: var(--acc-wash);
  border-color: var(--acc-txt);
  color: var(--acc-txt);
  font-weight: 600;
}
.frm-reg__b[aria-pressed="true"] .frm-reg__k { background: var(--acc-deep); border-color: var(--acc-txt); }
.frm-reg__b[aria-pressed="true"] .frm-reg__k::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.frm-reg__b:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }

/* ---- le bandeau interlocuteur ---- */
.frm-p {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1.1rem 0 0;
  padding: 1rem 1.15rem;
  border-radius: 18px 6px 18px 6px;
  background: linear-gradient(135deg, #211E1B, #111214);
  color: #fff;
  box-shadow: 0 14px 34px -22px rgba(13, 13, 15, .9);
  animation: frm-apparait .3s cubic-bezier(.2, .75, .3, 1);
}
@keyframes frm-apparait {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.frm-p__phs { display: flex; flex: 0 0 auto; }
.frm-p__phs .frm-p__ph + .frm-p__ph { margin-left: -1rem; }
.frm-p__ph {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 3.4rem;
  aspect-ratio: 1 / 1;
}
.frm-p__rond {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px #211E1B;
}
.frm-p__rond img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1));
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.frm-p__li {
  position: absolute; right: -8%; bottom: -8%;
  width: 40%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0a66c2; color: #fff;
  box-shadow: 0 0 0 2px #211E1B;
}
.frm-p__li svg { width: 58%; height: 58%; }
.frm-p__t { min-width: 0; }
.frm-p__k {
  margin: 0; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc);
}
.frm-p__n { margin: .15rem 0 0; font-size: 1.08rem; font-weight: 700; color: #fff; }
.frm-p__r { margin: 0; font-size: .84rem; color: #B3ACA1; }
.frm-p__d { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: #CFC9BF; }

/* ---- les champs ---- */
.frm-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.frm-c { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.frm-c--large { grid-column: 1 / -1; }
.frm-bloc > .frm-c--large { margin: .85rem 0 0; }
.frm-c label { font-size: .8rem; font-weight: 600; color: var(--color-ink); }
.frm-opt { font-weight: 400; color: var(--color-muted); }
.frm-c input, .frm-c textarea {
  width: 100%;
  padding: .68rem .85rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
  font: inherit;
  font-size: .95rem;
  color: var(--color-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.frm-c textarea { resize: vertical; min-height: 4.6rem; }
.frm-c input:hover, .frm-c textarea:hover { border-color: var(--color-muted); }
.frm-c input:focus, .frm-c textarea:focus {
  outline: none;
  border-color: var(--acc-txt);
  box-shadow: 0 0 0 3px var(--acc-wash);
}
.frm-c.is-faux input, .frm-c.is-faux textarea { border-color: #b3261e; background: rgba(179, 38, 30, .04); }
.frm-c.is-faux input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
.frm-msg {
  display: flex; align-items: flex-start; gap: .3rem;
  font-size: .78rem; line-height: 1.4; color: #8c1d18;
}
.frm-msg::before { content: "▲"; font-size: .58rem; line-height: 1.7; }

/* ---- consentement, erreur globale, envoi ---- */
.frm-rgpd {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .82rem; line-height: 1.5; color: var(--color-muted);
}
.frm-rgpd input { margin-top: .18rem; accent-color: var(--acc-txt); width: 1rem; height: 1rem; }
.frm-rgpd a { color: var(--acc-txt); text-decoration: underline; }
.frm-rgpd.is-faux { color: #8c1d18; }
.frm-rgpd.is-faux input { outline: 2px solid #b3261e; outline-offset: 2px; }

.frm-err {
  margin: 0; padding: .75rem .95rem;
  border-left: 3px solid #b3261e;
  border-radius: 6px;
  background: rgba(179, 38, 30, .07);
  color: #8c1d18;
  font-size: .86rem; line-height: 1.5;
}
.frm-err a { color: inherit; text-decoration: underline; }

.frm-fin {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
  padding-top: .4rem;
  border-top: 1px solid var(--color-line);
}
.frm-go { display: inline-flex; align-items: center; gap: .5rem; }
.frm-go__f { transition: transform .18s ease; }
.frm-go:hover .frm-go__f { transform: translateX(3px); }
.frm-go:disabled { opacity: .6; cursor: progress; }
.frm-pied { margin: 0; flex: 1; min-width: 14rem; font-size: .8rem; line-height: 1.45; color: var(--color-muted); }
.frm-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.frm-ok {
  padding: 2.4rem 1.6rem;
  border-radius: 22px 8px 22px 8px;
  background: linear-gradient(135deg, #211E1B, #111214);
  color: #fff;
  text-align: center;
}
.frm-ok__t { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 700; color: #fff; }
.frm-ok__d { margin: 0; color: #CFC9BF; }

@media (max-width: 620px) {
  .frm-g { grid-template-columns: minmax(0, 1fr); }
  .frm-p { flex-direction: column; align-items: flex-start; }
  .frm-aide, .frm-reg, .frm-g, .frm-rgpd, .frm-err, .frm-fin,
  .frm-bloc > .frm-c--large, .frm-p { margin-left: 0; }
}

/* Colonne de gauche de la page contact : la photo des fondateurs comble
   le vide sous le chapeau et rappelle qu'on écrit à des gens. */
.cvis {
  margin: 2rem 0 0;
  border-radius: 22px 8px 22px 8px;
  overflow: hidden;
  box-shadow: 0 18px 44px -28px rgba(13, 13, 15, .8);
}
.cvis img { display: block; width: 100%; height: auto; }
.cvis__l {
  padding: .95rem 1.1rem;
  background: linear-gradient(135deg, #211E1B, #111214);
  color: #CFC9BF;
  font-size: .84rem;
  line-height: 1.55;
}
.cvis__k {
  display: block;
  margin-bottom: .2rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc);
}

/* La carte du formulaire respire : 24 px de marge intérieure collaient
   les cases à cocher au bord. Le titre de la carte s'écarte aussi du
   premier bloc, pour que les deux étapes se lisent comme un ensemble. */
.conversion__form:has(.frm) {
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.conversion__form:has(.frm) .conversion__form__title {
  margin-bottom: 1.5rem;
}

/* Variante compacte : le formulaire tient dans une colonne étroite,
   à côté d'un argumentaire. Régions sur une seule colonne défilante,
   champs empilés, pas de champ message. */
.frm-hote--compact .frm { gap: 1.2rem; }
.frm-hote--compact .frm-lg { font-size: .98rem; }
.frm-hote--compact .frm-num { width: 1.4rem; height: 1.4rem; font-size: .74rem; }
.frm-hote--compact .frm-aide { font-size: .8rem; margin-bottom: .7rem; }
.frm-hote--compact .frm-reg { grid-template-columns: minmax(0, 1fr); gap: .18rem; }
.frm-hote--compact .frm-reg__b { padding: .42em .6em; font-size: .82rem; border-color: transparent; }
.frm-hote--compact .frm-p {
  gap: .8rem;
  padding: .8rem .9rem;
  margin-top: .8rem;
  border-radius: 14px 5px 14px 5px;
}
.frm-hote--compact .frm-p__ph { width: 2.7rem; }
.frm-hote--compact .frm-p__n { font-size: .96rem; }
.frm-hote--compact .frm-p__d { display: none; }
.frm-hote--compact .frm-g { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.frm-hote--compact .frm-c input { padding: .56rem .72rem; font-size: .9rem; }
.frm-hote--compact .frm-rgpd { font-size: .76rem; }
.frm-hote--compact .frm-fin { flex-direction: column; align-items: stretch; gap: .5rem; }
.frm-hote--compact .frm-go { align-self: stretch; justify-content: center; }
.frm-hote--compact .frm-pied { min-width: 0; font-size: .74rem; text-align: center; }
.frm-hote--compact .frm-ok { padding: 1.6rem 1rem; }

/* Menu déroulant des régions, en colonne étroite. Le bouton porte le
   résumé du choix : on n'ouvre pas le panneau pour savoir ce qu'on a
   coché. Douze cases en pile prenaient la moitié du bloc. */
.frm-sel { position: relative; }
.frm-sel__b {
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  padding: .66rem .85rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
  font: inherit; font-size: .9rem; text-align: left;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.frm-sel__b:hover { border-color: var(--color-muted); }
.frm-sel__b[aria-expanded="true"] {
  border-color: var(--acc-txt);
  box-shadow: 0 0 0 3px var(--acc-wash);
}
.frm-sel__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frm-sel__t.is-plein { color: var(--color-ink); font-weight: 600; }
.frm-sel__ch {
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.frm-sel__b[aria-expanded="true"] .frm-sel__ch { transform: rotate(-135deg) translate(-3px, -3px); }
.frm-sel__p {
  position: absolute;
  z-index: 30;
  top: calc(100% + .35rem);
  left: 0; right: 0;
  max-height: 17rem;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: 0 20px 44px -22px rgba(27, 28, 30, .55);
  scrollbar-width: thin;
  scrollbar-color: var(--acc-txt) rgba(27, 28, 30, .12);
  animation: frm-apparait .18s ease;
}

/* Le mot « easy » de la phrase de mission est découpé dans le logotype :
   ce sont les vraies lettres de la marque, pas la police du site.
   La boîte du SVG porte le jambage du « y » : la hauteur d'x n'occupe
   que 69,3 % de sa hauteur, d'où le calage. */
.mot-easy {
  display: inline-block;
  height: .78em;                 /* hauteur d'x alignée sur celle du texte */
  width: auto;
  vertical-align: -.24em;        /* le jambage du « y » descend sous la ligne de base */
  fill: var(--sand-acc);         /* inline : le SVG prend la couleur qu'on lui donne */
  margin-inline: .08em;
}

/* Le cadre est en 4/3, la vidéo en 16/9 : la règle « contain » posée
   pour les vignettes laissait deux bandes sombres. Ici le cadre EST
   le média, il doit être rempli. */
.media-fill--video .video-loop,
.media-fill--video .video-loop__media,
.media-fill--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* Champ libre de la case « Autre » du configurateur. Il se déplie sous
   la grille, dans la largeur du bloc de question. */
.qautre {
  width: 100%;
  margin-top: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--acc-deep);
  border-radius: 10px;
  background: var(--color-bg);
  font: inherit;
  font-size: .93rem;
  color: var(--color-ink);
}
.qautre:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 1px; }
.opt.opt-autre { border-style: dashed; }

/* ============================================================
   1. LE DOIGT NE DOIT PAS POUVOIR SORTIR DE LA PAGE
   Le tiroir de navigation est pose hors cadre a droite
   (translateX(100%)) tant qu'il est ferme. Sur telephone il
   rallongeait la page : on pouvait glisser vers la droite et
   tomber sur du vide blanc. `clip` coupe ce depassement sans
   creer de conteneur de defilement, contrairement a `hidden`
   qui casserait les en-tetes collants.
   ============================================================ */
html, body { overflow-x: clip; }

/* Ceinture et bretelles : ferme, le tiroir ne participe plus au
   calcul de la largeur et n'attrape plus le doigt. */
.mobile-menu { visibility: hidden; }
.mobile-menu.is-open { visibility: visible; }

/* ============================================================
   2. LE TIROIR DE NAVIGATION
   Les deux entrees de tete etaient des <a> nus quand les deux
   groupes sont des <summary> : une moitie du menu en maigre sans
   filet, l'autre en gras avec filet. Toutes les lignes prennent
   ici le meme gabarit, et l'action principale, qui disparaissait
   avec l'en-tete, revient en pied de tiroir.
   ============================================================ */
.mobile-menu {
  padding: 1rem var(--pad) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.mobile-menu__header {
  margin-bottom: .6rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--color-line);
}
.mobile-menu__logo { height: 30px; }
.mobile-menu__close {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mobile-menu__close:hover { background: var(--acc-deep); border-color: var(--acc-txt); color: #fff; }

/* Le bloc d'action est dans le <nav> : sans cette chaine de flex, son
   margin-top:auto n'a rien pour pousser et il flotte au milieu du
   tiroir sur les grands ecrans. */
.mobile-menu__nav { gap: 0; flex: 1; }

/* Le gabarit commun : entrees simples et en-tetes de groupe */
.mobile-menu__nav > a,
.mobile-menu__link,
.mobile-menu__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .2rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-brand-dark);
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}
.mobile-menu__nav > a:hover,
.mobile-menu__group > summary:hover { color: var(--acc-txt); }

/* Chevron de depliage, a la place du triangle du navigateur */
.mobile-menu__group > summary { list-style: none; }
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__group > summary::after {
  content: "";
  width: .52rem; height: .52rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em);
  opacity: .55;
  transition: transform .22s ease, opacity .22s ease;
  flex: none;
}
.mobile-menu__group[open] > summary::after {
  transform: rotate(-135deg) translate(-.16em, -.16em);
  opacity: 1;
}
.mobile-menu__group[open] > summary { color: var(--acc-txt); border-bottom-color: transparent; }

/* Les liens du groupe : rentres, plus discrets, mais la cible du
   doigt reste au-dessus des 44 px recommandes. */
.mobile-menu__group > a {
  padding: .72rem 0 .72rem 1.1rem;
  font-size: .96rem;
  font-weight: 500;
  color: var(--sand-ink, #3B3936);
  border-bottom: 0;
  border-left: 2px solid var(--color-line);
  margin-left: .25rem;
}
.mobile-menu__group > a:hover { color: var(--acc-txt); border-left-color: var(--acc-txt); }
.mobile-menu__group > a:last-of-type { margin-bottom: .5rem; }

/* L'action principale, en pied de tiroir */
.mobile-menu__cta {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mobile-menu__cta .btn { width: 100%; justify-content: center; }
.mobile-menu__cta .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
}
.mobile-menu__cta .btn--primary:hover { background: var(--acc-darker); color: #fff; }
/* Meme mecanisme que le pied de page : le numero n'est jamais dans le
   HTML en clair, motion.js le revele au clic. */
.mobile-menu__tel {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-brand-dark);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color .2s ease, color .2s ease;
}
.mobile-menu__tel:hover { border-color: var(--acc-txt); color: var(--acc-txt); }

/* ============================================================
   3. ACCUEIL SUR TELEPHONE : LE MEDAILLON LAISSE LA PLACE
   Sur petit ecran il passait dans le fil, au-dessus du titre, et
   repoussait tout le hero vers le bas. La distinction reste
   visible sur la page A propos et dans le pied de page.
   ============================================================ */
@media (max-width: 760px) {
  .hlab { display: none; }
  .page-service__hero--cinema > .container {
    padding-top: 1.6rem;
    padding-bottom: 2.6rem;
  }
}

/* ============================================================
   4. LA LIGNE DE GARANTIES SUR LES HEROS VIDEO
   Ecrite en brun sourd, elle disparaissait dans l'image. Le voile
   du hero s'allege vers le bas, un liset d'ombre la tient donc
   lisible quelle que soit l'image derriere.
   ============================================================ */
.page-service__hero--media .hero-stats-inline,
.page-service__hero--cinema .hero-stats-inline {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 12px rgba(13, 13, 15, .85), 0 1px 3px rgba(13, 13, 15, .6);
}
.page-service__hero--media .hero-stats-inline strong,
.page-service__hero--cinema .hero-stats-inline strong { color: #fff; }

/* ============================================================
   5. LE BOUTON SOUS LA GRILLE DES SECTEURS
   `.sector-cards-grid__cta a` avait ete ecrit pour un lien texte
   orange ; le bloc porte maintenant un bouton, qui heritait de
   cette couleur sur son fond navy. La regle ne vise plus que les
   liens nus, et le bouton prend l'orange de l'en-tete.
   ============================================================ */
.sector-cards-grid__cta a:not(.btn) { color: var(--acc-txt); font-weight: 600; }
.sector-cards-grid__cta .btn--primary {
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
}
.sector-cards-grid__cta .btn--primary:hover { background: var(--acc-darker); color: #fff; }

/* ============================================================
   PAS D'ITALIQUE DANS LES TITRES
   `.em` marque la partie accentuee d'un titre : elle etait posee
   en italique en plus de la couleur et de la graisse. Les 17
   emplois de la classe sont tous dans un <h1>/<h2>, la couleur et
   le 600 suffisent a detacher le membre de phrase.
   Les italiques legitimes (citations, notes de bas de bloc,
   variantes du glossaire) ne sont pas touchees.
   ============================================================ */
.em,
.fq .em,
.cc .em,
.gl .em,
.res-hero .em { font-style: normal; }

/* Lien de gestion des cookies, en pied de page.
   La politique cookies promet de pouvoir revenir sur ses choix « a tout
   moment » : sans ce declencheur, la promesse etait invérifiable. C'est un
   <button> et non un <a> — il ne mene nulle part, il rouvre le panneau du
   CMP — mais il doit se lire comme les autres liens legaux. */
.site-footer__cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.site-footer__cookies:hover { color: var(--acc); }

/* ============================================================
   LE DIAGNOSTIC DU PLAN DE NETTOYAGE
   Remplace l'ancien estimateur. Les questions reutilisent la
   grammaire du configurateur (.qblock, .qhead, .opt-grid, .opt) :
   aucun style neuf de ce cote. Seuls le tableau a deux colonnes,
   le volet cout et le panneau d'hypotheses sont nouveaux.
   ============================================================ */
.cc-diag-sec { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--bg-1); }

.dg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
/* Le resultat suit la lecture des questions : il se complete a mesure
   qu'on repond, il ne faut pas avoir a remonter pour le voir. */
.dg__r { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1rem; }

.dg-champ { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.dg-champ input[type="number"] {
  width: 9rem; padding: .7rem .9rem;
  border: 1.5px solid var(--color-line); border-radius: 12px;
  font: inherit; font-weight: 600; color: var(--color-brand-dark);
  background: var(--bg-0);
}
.dg-champ input:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }
.dg-champ input:disabled { opacity: .45; }
.dg-unite { font-size: .92rem; color: var(--color-muted); font-weight: 600; }
.dg-nsp {
  margin-left: auto; background: none; border: 0; padding: .3rem .1rem;
  font: inherit; font-size: .86rem; color: var(--color-muted);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.dg-nsp.is-on { color: var(--acc-txt); font-weight: 600; }
.dg-coche { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; font-size: .9rem; color: var(--color-muted); }
.dg-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-top: .5rem; }
.dg-trio > label { font-size: .9rem; font-weight: 600; color: var(--color-brand-dark); }
.dg-trio .dg-champ input { width: 100%; }
.qhead--sub { margin-top: 1.2rem; }
.opt-grid .opt small { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 400; color: var(--color-muted); line-height: 1.3; }
.opt-grid--k { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .5rem; }

.dg-card {
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.dg-card--cout { background: var(--color-brand-dark); color: #fff; border-color: transparent; }
.dg-card--cout a { color: var(--acc); }

/* Le deplacement : la phrase qui montre qu'on a lu la situation. */
.dg-depl {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  background: var(--acc-wash);
  border-left: 3px solid var(--acc-deep);
  border-radius: 0 10px 10px 0;
  font-size: .95rem; line-height: 1.5; color: var(--sand-ink, #3B3936);
}
.dg-titre { margin: 0 0 .4rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; color: var(--color-brand-dark); }
.dg-titre2 { margin: 0 0 1rem; font-size: 1.1rem; color: #fff; }
.dg-sous { margin: 0 0 1.4rem; font-size: .84rem; color: var(--color-muted); }

.dg-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dg-tab th, .dg-tab td { padding: .7rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.dg-tab thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.dg-tab tbody th { font-weight: 600; color: var(--color-brand-dark); width: 26%; }
.dg-tab td:last-child { color: var(--acc-txt); font-weight: 500; }
.dg-note { margin: 1rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--color-muted); }

.dg-c__l, .dg-c__d, .dg-c__v, .dg-c__p { font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; color: rgba(255,255,255,.9); }
.dg-c__eq { margin: 0 0 .6rem; }
.dg-c__n { display: block; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; color: var(--acc); line-height: 1.1; }
.dg-c__v { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); }
.dg-c__p { font-size: .84rem; color: rgba(255,255,255,.72); }
.dg-fin-f { margin-top: 1.2rem; }
.dg-fin-f label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .2rem; }
.dg-fin-f .dg-unite { color: rgba(255,255,255,.75); }

.dg-hyp { border: 1px solid var(--color-line); border-radius: 14px; background: var(--bg-0); padding: 1rem 1.2rem; }
.dg-hyp > summary { font-weight: 600; cursor: pointer; color: var(--color-brand-dark); font-size: .95rem; }
.dg-hyp ul { margin: 1rem 0 0; padding-left: 1.1rem; }
.dg-hyp li { font-size: .84rem; line-height: 1.55; color: var(--color-muted); margin-bottom: .6rem; }
.dg-k { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: .86rem; font-weight: 600; color: var(--color-brand-dark); }
.dg-fin { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--color-muted); }

@media (max-width: 980px) {
  .dg { grid-template-columns: 1fr; }
  .dg__r { position: static; }
}

/* Version simplifiee du diagnostic : la question d'encombrement est repliee
   (elle a une valeur par defaut sensee), et le resultat tient en une phrase
   suivie de son explication. */
.dg-opt {
  border: 1px dashed var(--color-line);
  border-radius: 14px;
  padding: .9rem 1.1rem;
  margin-top: 1rem;
}
.dg-opt > summary { cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--color-brand-dark); }
.dg-opt > summary span { font-weight: 400; color: var(--color-muted); }
.dg-opt .opt-grid { margin-top: .9rem; }

.dg-plus { margin-top: 1rem; }
.dg-plus label { font-size: .9rem; font-weight: 600; color: var(--color-brand-dark); }

/* La reponse, en gros, sans detour. */
.dg-titre { font-size: clamp(1.4rem, 3vw, 2rem); }
.dg-expl { margin: .6rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--sand-ink, #3B3936); }
.dg-alerte {
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  background: var(--acc-wash);
  border-left: 3px solid var(--acc-deep);
  border-radius: 0 10px 10px 0;
  font-size: .93rem; line-height: 1.55; color: var(--sand-ink, #3B3936);
}
.dg-liste { margin: 0; padding-left: 1.1rem; }
.dg-liste li { font-size: .93rem; line-height: 1.55; color: var(--sand-ink, #3B3936); margin-bottom: .7rem; }
.dg-liste li:last-child { margin-bottom: 0; }

.dg-c__intro { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.8); margin: 0 0 1.2rem; }
.dg-c__pt { color: rgba(255,255,255,.6); font-size: .85rem; }

/* ============================================================
   L'ENCADRÉ « UNE QUESTION ? »
   Un chatbot attend en bas à droite qu'on vienne le chercher, et
   il ignore de quoi parle la page. Ici c'est l'inverse : de petits
   encadrés posés dans les blocs où la question naît, chacun sachant
   de quoi il parle. Replié, l'encadré tient en une ligne et ne vole
   rien à la page ; déplié, c'est la même conversation.
   ============================================================ */
.qs { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; }

/* Replié : une barre qui doit se voir. Fond sable, filet orange à gauche,
   pastille pleine — le reste de la page est blanc, elle ressort par contraste
   sans avoir besoin de crier. */
.qs__appel {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.15rem 1.05rem 1.05rem;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--acc-deep);
  border-radius: 14px;
  background: var(--color-bg-soft);
  box-shadow: 0 6px 20px -14px rgba(27, 28, 30, .5);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qs__appel:hover {
  border-color: var(--acc-txt);
  box-shadow: 0 10px 26px -14px rgba(184, 148, 0, .55);
  transform: translateY(-1px);
}
.qs__appel:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

.qs__ic {
  position: relative;
  flex: none;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: var(--acc-deep);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem;
}
/* Un halo qui bat trois fois à l'arrivée, puis s'arrête : on attire le regard
   une fois, on ne le harcèle pas. */
.qs__ic::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(184, 148, 0, .45);
  animation: qs-halo 2.4s ease-out 3;
}
@keyframes qs-halo {
  0%   { box-shadow: 0 0 0 0 rgba(184, 148, 0, .45); }
  60%  { box-shadow: 0 0 0 .75rem rgba(184, 148, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 148, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .qs__ic::after { animation: none; }
  .qs__appel:hover { transform: none; }
}

.qs__t { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.qs__t strong { font-size: .96rem; color: var(--color-brand-dark); font-weight: 600; }
.qs__t span { font-size: .82rem; color: var(--color-muted); }
.qs__fl { flex: none; color: var(--acc-txt); display: grid; place-items: center; transition: transform .22s ease; }
.qs__fl svg { width: 1.05rem; height: 1.05rem; }
.qs.is-ouvert .qs__fl { transform: rotate(90deg); }

/* Déplié */
.qs__corps {
  margin-top: .6rem;
  background: var(--bg-0);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
}
.qs--ouvert > .qs__corps {
  margin-top: 0;
  border-radius: 20px;
  box-shadow: var(--shadow-lift, 0 18px 50px -28px rgba(13, 13, 15,.35));
}

/* Replié le fil est vide : il ne prend de la hauteur qu'une fois rempli, pour
   ne pas ouvrir sur un grand vide. */
.qs__fil {
  max-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .8rem;
  transition: max-height .25s ease, padding .25s ease;
}
.qs__fil.is-plein {
  max-height: clamp(260px, 40vh, 400px);
  padding: clamp(1rem, 2.2vw, 1.4rem);
}
.qs--ouvert .qs__fil { max-height: clamp(260px, 40vh, 400px); padding: clamp(1rem, 2.2vw, 1.4rem); }

.qs-m { max-width: 86%; }
.qs-m p { margin: 0; font-size: .94rem; line-height: 1.6; white-space: pre-wrap; }
.qs-m--bot {
  align-self: flex-start;
  background: var(--bg-1);
  border: 1px solid var(--color-line);
  border-radius: 14px 14px 14px 4px;
  padding: .8rem 1rem;
  color: var(--sand-ink, #3B3936);
}
.qs-m--moi {
  align-self: flex-end;
  background: var(--color-brand-dark);
  border-radius: 14px 14px 4px 14px;
  padding: .8rem 1rem;
  color: #fff;
}

/* Trois points pendant la réflexion : sans ce signe, un silence de quelques
   secondes se lit comme une panne. */
.qs-m--attente { display: flex; gap: .3rem; align-items: center; }
.qs-m--attente span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--color-muted);
  animation: dm-pulse 1.2s ease-in-out infinite;
}
.qs-m--attente span:nth-child(2) { animation-delay: .18s; }
.qs-m--attente span:nth-child(3) { animation-delay: .36s; }
@keyframes dm-pulse { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qs-m--attente span { animation: none; opacity: .5; } }

.qs-jalon {
  align-self: center;
  font-size: .8rem;
  color: var(--acc-txt);
  background: var(--acc-wash);
  border-radius: 999px;
  padding: .3rem .85rem;
}

.qs__ex {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1rem, 2.2vw, 1.4rem) 0;
}
.qs__exb {
  padding: .45rem .85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--bg-0);
  font: inherit; font-size: .84rem;
  color: var(--color-brand-dark);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.qs__exb:hover { border-color: var(--acc-txt); color: var(--acc-txt); }

.qs__saisie {
  display: flex; align-items: flex-end; gap: .6rem;
  padding: .75rem clamp(1rem, 2.2vw, 1.4rem);
  border-top: 1px solid var(--color-line);
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
}
.qs__fil.is-plein + .qs__saisie,
.qs--ouvert .qs__fil + .qs__saisie { margin-top: 0; }
.qs__saisie textarea {
  flex: 1; resize: none; border: 0; background: none;
  font: inherit; font-size: .94rem; line-height: 1.5;
  color: var(--color-brand-dark);
  max-height: 130px; padding: .4rem 0;
}
.qs__saisie textarea:focus { outline: none; }
.qs__saisie textarea::placeholder { color: var(--color-muted); }

.qs__envoi {
  flex: none; width: 2.3rem; height: 2.3rem;
  border: 0; border-radius: 50%;
  background: var(--acc-deep); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease;
}
.qs__envoi svg { width: 1.05rem; height: 1.05rem; }
.qs__envoi:hover { background: var(--acc-darker); }
.qs__envoi:disabled { opacity: .35; cursor: default; }
.qs__envoi:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* L'encadré posé en fin de page, juste avant l'appel final. On resserre le
   rythme vertical : la section standard aère trop pour ce qui n'est qu'une
   ligne repliée. */
/* L'encadré est sable : il ne se lit que posé sur du blanc. Le conteneur
   impose donc son propre fond blanc et une respiration des deux côtés, pour
   que l'encadré ne touche jamais un bloc sable voisin, quel que soit le fond
   de la section qui précède ou qui suit. */
.qs-section {
  background: var(--color-bg);
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.qs-section .qs { margin-top: 0; }

/* La fiche de rappel, posée dans le fil quand l'assistant la propose : des
   cases nettes, deux colonnes, le bouton à l'orange du site. */
.qs-fiche {
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--acc-deep);
  border-radius: 14px;
  padding: 1rem 1.05rem;
}
.qs-fiche__t {
  margin: 0 0 .8rem;
  font-size: .92rem; font-weight: 600;
  color: var(--color-brand-dark);
}
.qs-fiche__g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem .75rem;
  margin: 0 0 .85rem;
}
.qs-fiche__c { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.qs-fiche__c > span {
  font-size: .78rem; font-weight: 600;
  color: var(--color-brand-dark);
}
.qs-fiche__c input,
.qs-fiche__c select {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  color: var(--color-ink);
  width: 100%;
}
.qs-fiche__c input:focus-visible,
.qs-fiche__c select:focus-visible {
  outline: 3px solid var(--acc-deep);
  outline-offset: 1px;
}
.qs-fiche__c--large { grid-column: 1 / -1; }
.qs-fiche__envoi.btn--primary {
  width: 100%;
  text-align: center;
  padding: .65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
.qs-fiche__envoi.btn--primary:hover { background: var(--acc-darker); color: #fff; }
.qs-fiche__envoi:disabled { opacity: .5; cursor: default; }
.qs-fiche__ok { margin: 0; font-weight: 600; color: var(--color-brand-dark); }
.qs-fiche__err { margin: .6rem 0 0; font-size: .85rem; color: #9c2f0f; }

@media (max-width: 30rem) {
  .qs-fiche__g { grid-template-columns: 1fr; }
}

/* Le bouton du résumé : une sortie secondaire, en contour, à côté de la
   démonstration qui reste l'action principale. */
.qs__pdf {
  flex: none;
  padding: .5rem 1rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-brand-dark);
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.qs__pdf:hover { border-color: var(--acc-txt); color: var(--acc-txt); }
.qs__pdf:disabled { opacity: .55; cursor: default; }
.qs__pdf:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }

/* La sortie vers la démonstration : elle est là dès l'ouverture, pour qui
   ne veut pas discuter. Séparée du fil par un filet, pas par une couleur :
   ce n'est pas une réclame, c'est la suite logique. */
.qs__sortie {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 clamp(1rem, 2.2vw, 1.4rem);
  padding: .85rem 0 .9rem;
  border-top: 1px solid var(--color-line);
}
.qs__qui { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 12rem; }
.qs__qui img {
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-line);
}
.qs__qui > span { font-size: .85rem; font-weight: 600; color: var(--color-brand-dark); line-height: 1.3; }
.qs__qui small { display: block; font-weight: 400; font-size: .78rem; color: var(--color-muted); }
.qs__qui--sans > span { font-weight: 600; }
/* .btn--primary est marine par défaut sur ce site ; chaque contexte qui veut
   l'orange le redéclare, comme le header et le menu mobile. On fait pareil. */
.qs__demo.btn--primary {
  flex: none;
  padding: .55rem 1.05rem;
  font-size: .88rem;
  border-radius: var(--radius-pill);
  background: var(--acc-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
.qs__demo.btn--primary:hover { background: var(--acc-darker); color: #fff; }

@media (max-width: 30rem) {
  .qs__sortie { gap: .7rem; }
  .qs__demo { width: 100%; text-align: center; }
}

.qs__pied {
  margin: 0;
  padding: 0 clamp(1rem, 2.2vw, 1.4rem) .9rem;
  font-size: .76rem; line-height: 1.5;
  color: var(--color-muted);
}

/* Sur fond sombre, l'encadré s'inverse. */

/* ============================================================
   EASY TO CARRY — la parure de la marque.
   Même squelette que easytoclean : seule la couleur d'accent
   change, l'orange devient le rouge du logo (#C0272D). Le marine
   et le sable restent, c'est la signature du groupe. Cette
   surcharge vit en fin de feuille : les variables de :root sont
   reprises, aucun composant n'est réécrit.
   ============================================================ */
:root {
  --color-brand-primary: #FFD200;
  --color-brand-primary-strong: #E4BC00;
  --acc: #FFD200;
  --acc-deep: #E4BC00;
  --acc-darker: #B89400;
  --acc-wash: #FBF4CE;
  --shadow-cta: 0 10px 22px -8px rgba(255, 210, 0, .45);
}

/* La bande de groupe : une ligne fine au-dessus de l'en-tête, la
   glissière au centre. Elle existe à l'identique sur les deux sites,
   c'est elle qui donne la sensation d'un seul geste. */
.gr-bande {
  background: var(--color-brand-dark);
  padding: .45rem 0;
}
.gr-bande .container {
  display: flex;
  justify-content: center;
}
.gr-glissiere {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  padding: .2rem;
  text-decoration: none;
}
.gr-glissiere__o {
  position: relative;
  z-index: 1;
  padding: .28rem .95rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .65);
  white-space: nowrap;
  transition: color .25s ease;
}
.gr-glissiere__o.est-actif { color: var(--color-brand-dark); }
.gr-glissiere__curseur {
  position: absolute;
  top: .2rem; bottom: .2rem;
  width: calc(50% - .2rem);
  border-radius: 999px;
  background: #fff;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.gr-glissiere[data-actif="0"] .gr-glissiere__curseur { transform: translateX(0); left: .2rem; }
.gr-glissiere[data-actif="1"] .gr-glissiere__curseur { transform: translateX(100%); left: .2rem; }
@media (prefers-reduced-motion: reduce) {
  .gr-glissiere__curseur { transition: none; }
}

/* Wrappers et modificateurs presents dans le HTML de production mais sans regle dediee :
   declarations neutres (valeurs par defaut ou identiques au bloc de base), rendu inchange. */
.nav-dropdown__menu-item__label { display: inline; }
.rf-frow__txt { display: block; }
.proxi__col--old { border-color: var(--color-line); }
.service-cta-final__inner { display: block; }

/* Les fonctions des marques sous la glissiere de groupe. */
.gr-glissiere { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr-glissiere__o { text-align: center; }
.gr-glissiere__o small { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .03em; opacity: .78; line-height: 1.15; margin-top: .05rem; }
.pv__ruban { position: relative; z-index: 2; }
input[type="range"] { accent-color: var(--acc-txt); }

/* La glissiere de groupe, permanente et invitante. */
.gr-bande { position: sticky; top: 0; z-index: 130; }
.site-header { top: var(--gr-hauteur, 62px); }
.gr-glissiere { transition: background .25s ease; }
.gr-glissiere:hover { background: rgba(255, 255, 255, .17); }
.gr-glissiere:hover .gr-glissiere__o:not(.est-actif) { color: #fff; }
@keyframes gr-invite {
  0%, 86%, 100% { color: rgba(255, 255, 255, .65); }
  92% { color: rgba(255, 255, 255, 1); }
}
.gr-glissiere__o:not(.est-actif) { animation: gr-invite 9s ease-in-out 5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .gr-glissiere__o:not(.est-actif) { animation: none; }
}

/* Davantage de logos clients visibles en simultane. */
.hproof__track { gap: clamp(1.1rem, 2.2vw, 2rem); }
.logos-marquee__item img { height: 32px; }

/* Le heros d'accueil laisse la place au bandeau de chiffres sous le pli :
   hauteur d'ecran moins la bande de groupe, l'en-tete, la barre de logos
   et la rangee de tuiles. */
.page-service__hero--accueil { min-height: clamp(480px, calc(100vh - 512px), 900px); }

/* L'affordance des rails horizontaux : fondu de bord et fleches. */
.rail-enveloppe { position: relative; }
.rail-enveloppe::before, .rail-enveloppe::after {
  content: ""; position: absolute; top: 0; bottom: 10px; width: 64px;
  pointer-events: none; transition: opacity .25s ease; z-index: 1;
}
.rail-enveloppe::after { right: 0; background: linear-gradient(to left, var(--rail-fond, #fff), transparent); }
.rail-enveloppe::before { left: 0; background: linear-gradient(to right, var(--rail-fond, #fff), transparent); opacity: 0; }
.rail-enveloppe.est-au-bout::after { opacity: 0; }
.rail-enveloppe.est-avance::before { opacity: 1; }
.rail-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); right: .3rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-line);
  background: #fff; box-shadow: var(--shadow-sm); cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--color-brand-dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease, transform .15s ease;
}
.rail-fleche:hover { transform: translateY(-50%) scale(1.08); }
.rail-fleche--gauche { left: .3rem; right: auto; }
.rail-fleche[hidden] { display: none; }

/* ==================== La lecture d'article, version ergonomique ====================
   Mesure de ligne ~70 caracteres, sommaire discret a droite, progression. */
@media (min-width: 1100px) {
  .blog-article { display: grid; grid-template-columns: minmax(0, 730px) 230px; column-gap: clamp(2.2rem, 4vw, 4rem); row-gap: 0; justify-content: center; }
  .blog-article > * { grid-column: 1; min-width: 0; }
  .blog-article > .blog-toc { grid-column: 2; grid-row: 1 / 200; align-self: start; position: sticky; top: calc(var(--gr-hauteur, 62px) + 92px); margin: 0; }
}
.blog-article { font-size: 1.0625rem; line-height: 1.78; }
.blog-article p { margin: 0 0 1.2em; }
.blog-article ul, .blog-article ol { margin: 0 0 1.35em; padding-left: 1.25em; }
.blog-article li { margin-bottom: .5em; }
.blog-article li::marker { color: var(--color-brand-primary-strong, var(--color-brand-dark)); }
.blog-article h2 { margin: 2.4em 0 .75em; padding-top: .6em; position: relative; scroll-margin-top: calc(var(--gr-hauteur, 62px) + 86px); }
.blog-article h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 2px; background: var(--color-brand-primary-strong, var(--color-brand-dark)); }
.blog-article h3 { margin: 1.7em 0 .55em; }
.blog-article .blog-article__lead { font-size: 1.16rem; line-height: 1.72; }
.blog-article tbody tr:nth-child(even) { background: var(--color-bg-soft); }
.blog-toc { border-left: 3px solid var(--color-line); padding: .2rem 0 .2rem 1rem; }
.blog-toc ol { list-style: none; margin: .5rem 0 0; padding: 0; }
.blog-toc li { margin: 0 0 .5rem; }
.blog-toc a { font-size: .85rem; line-height: 1.4; color: var(--color-muted); display: block; transition: color .2s ease; }
.blog-toc a:hover { color: var(--color-ink); }
.blog-toc a.est-actif { color: var(--color-brand-primary-strong, var(--color-brand-dark)); font-weight: 600; }
.blog-toc__title { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink); }
.lecture-avance { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--color-brand-primary-strong, var(--color-brand-dark)); z-index: 200; pointer-events: none; }
.retour-haut { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 150; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; color: var(--color-brand-dark); box-shadow: var(--shadow-lift); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.retour-haut.est-visible { opacity: 1; pointer-events: auto; }
.appel-flottant { position: fixed; right: 1.1rem; bottom: 4.4rem; z-index: 150; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.appel-flottant.est-visible { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 700px) { .appel-flottant { display: none; } }

/* Les tableaux d'article restent entiers : defilement interne si besoin. */
.blog-article table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.blog-article table thead, .blog-article table tbody { display: table; width: 100%; border-collapse: collapse; }

/* Les tableaux d'article : compacts dans la colonne, jamais sous le sommaire. */
.blog-article table { font-size: .88rem; line-height: 1.5; }
.blog-article th, .blog-article td { padding: .5rem .65rem; }

/* La passerelle de groupe : la marque soeur, presentee dans ses couleurs. */
.passerelle { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-bg-soft); }
.passerelle__in { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; padding: 1.7rem 0; }
.passerelle__marque { flex: 1 1 480px; }
.passerelle__logo { display: block; height: 22px; width: auto; margin-bottom: .6rem; }
.passerelle__txt { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--color-muted); }
.passerelle__txt strong { color: var(--color-ink); }
.passerelle--clean { border-left: 5px solid #C6102A; }
.passerelle--carry { border-left: 5px solid #FFD200; }
.passerelle .btn { white-space: nowrap; }

/* L'univers carry : rouge electrique, sable chaud, charbon espresso. */
:root {
  --color-brand-dark: #1B1C1E;
  --color-ink: #2B2724;
}

/* La transition de bascule : fond uni de la marque d'arrivee, logo qui parait. */
.gr-transition { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.gr-transition.est-la { opacity: 1; }
.gr-transition>img{ transform: scale(.86); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1) .1s, opacity .4s ease .1s; }
.gr-transition.est-la>img{ transform: none; opacity: 1; }
/* La glissiere aguicheuse : pastille pulsante sur la marque inactive, curseur au survol. */
.gr-glissiere__o:not(.est-actif) { position: relative; }
.gr-glissiere[data-actif="1"]:has(.gr-glissiere__o:first-child:hover) .gr-glissiere__curseur { transform: translateX(14%); }
.gr-glissiere[data-actif="0"]:has(.gr-glissiere__o:last-child:hover) .gr-glissiere__curseur { transform: translateX(86%); }
@media (prefers-reduced-motion: reduce) {
  .gr-transition, .gr-transition>img{ transition: none; }
}

/* La bande de bascule : marine sous clean, rouge sous carry. */
.gr-bande {
  background: linear-gradient(100deg, #18344B 0%, #18344B 49.4%, #1B1C1E 50.6%, #1B1C1E 100%);
}

/* Les fonctions des marques, en clair sur la bande, chacune sur sa couleur. */
.gr-bande .container { display: flex; justify-content: center; align-items: center; gap: 1.6rem; }
.gr-bande__fonction { color: rgba(255, 255, 255, .92); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) { .gr-bande__fonction { display: none; } }
.gr-glissiere__o small { display: none; }

/* Points de chargement dans la transition de bascule */
.gr-t-bloc{display:flex;flex-direction:column;align-items:center;transform:scale(.86);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1) .1s,opacity .4s ease .1s}
.gr-transition.est-la .gr-t-bloc{transform:none;opacity:1}
.gr-t-points{display:flex;justify-content:center;align-items:center;gap:8%;width:100%}
.gr-t-points img{width:10.4%;height:auto;animation:gr-t-charge .85s ease-in-out infinite}
.gr-t-points img:nth-child(2){animation-delay:.14s}
.gr-t-points img:nth-child(3){width:9.7%;animation-delay:.28s}
.gr-t-mot{width:100%;height:auto;display:block}
@keyframes gr-t-charge{0%,55%,100%{opacity:.35;transform:translateY(0)}25%{opacity:1;transform:translateY(-18%)}}
@media (prefers-reduced-motion:reduce){.gr-t-points img{animation:none}.gr-t-bloc{transition:none}}

/* -----------------------------------------------------------------
   L'univers carry : rouge ultra vif sur noir.
   Trois regles tiennent l'ensemble :
   1. une surface rouge porte toujours du texte BLANC ;
   2. une surface noire porte du blanc ou du rouge vif ;
   3. sur fond clair, le mot accentue s'ecrit en rouge profond, jamais
      en rouge vif (illisible sur creme).
   Le jeton --acc-txt bascule tout seul selon le bloc.
   ----------------------------------------------------------------- */
:root { --acc-txt: #E4BC00; }
.bp__c,
.cvis__l,
.dm__c,
.frm-ok,
.frm-p,
.fx__c,
.fxm__box,
.gm--fiches .gm__carte,
.gm--fiches .gm__photo,
.gm__carte,
.gm__detail,
.gr--questions .gr__grille,
.gr-bande,
.gr__i,
.hresp,
.lo__q,
.mo__c,
.of__cinq,
.of__p,
.page-service__hero--cinema,
.pb__b,
.preuve__media,
.proc-car__media,
.proc__frame .video-loop video,
.proc__frame video,
.pv__c,
.rc__b--roi,
.rf-frow__media,
.rf-frow__media .video-loop video,
.rf-frow__media video,
.rf-reel,
.rf-reel .video-loop video,
.rf-reel video,
.robotcard__media,
.sector-hero--media,
.video-loop .video-loop__media,
.why-band__media .video-loop video,
.why-band__media video { --acc-txt: #FFD200; }
.site-footer, .site-footer * { --acc-txt: #FFD200; }
.atout,
.blog-card,
.btn--outline,
.cc .btn-outline-d,
.cc-est-sec,
.cc-pledge,
.cc-why,
.cc-why-card,
.ccol,
.ccol .opt-badge,
.cfaq .faq-item,
.cfg-top,
.clean-card,
.config,
.config-band__inner,
.conversion__form,
.cp__card[aria-pressed="true"],
.cp__fn,
.cp__q,
.cp__raz,
.cpx-pl__i img,
.cross-more > summary,
.env-card__robot,
.estimator,
.faq__item,
.field input:focus,
.fq-item,
.fq-link,
.fq-search,
.fq-sec,
.gl-alpha,
.gl-search,
.gl-sec,
.gr-glissiere__curseur,
.guarantees--energy .guarantee,
.hproof,
.implant-card,
.maillage__link,
.matrix-tags span,
.mobile-menu,
.nav-dropdown__menu,
.opt,
.page-service__hero__form,
.pitch-band__benefit,
.pricing-leadgen__form,
.qs-fiche,
.qs-fiche__c input,
.qs-fiche__c select,
.qs__pdf,
.qtextarea,
.rail-fleche,
.rc-tile,
.retour-haut,
.rf-pc,
.robot-card,
.robot-compare__table tr.is-current .robot-compare__chip,
.robotcard,
.rp-adv,
.rp-day li,
.rp-daytab,
.rp-kit,
.rp-solidcard,
.rp-stat,
.rp-tl,
.sect-pill,
.sector-card,
.sector-card-wrap,
.sector-chapter,
.service-cta-final .btn--primary,
.site-header__cta.btn--primary,
.sr-nav,
.temoignage { --acc-txt: #E4BC00; }

/* 1. surfaces rouges : texte blanc */
.btn--primary, .btn--primary:visited { background: #FFD200; color: #fff; border-color: #FFD200; }
.btn--primary:hover { background: #E4BC00; color: #fff; border-color: #E4BC00; }
.btn--primary.btn--lg { color: #fff; }
.site-header__cta.btn--primary { background: #FFD200; color: #fff; border-color: #FFD200; }
.site-header__cta.btn--primary:hover { background: #E4BC00; color: #fff; border-color: #E4BC00; }
.sector-hero--media .btn--primary, .materiel-ctas .btn--primary,
.materiel-ctas .btn--primary:hover, .qs__demo.btn--primary, .qs__demo.btn--primary:hover { background: #FFD200; color: #fff; border-color: #FFD200; }
.section-header__overline, .pricing-leadgen__content__overline, .section-header__eyebrow,
.sector-hero__eyebrow, .rp-eyebrow, .proxi__col--new .proxi__tag, .bp__tag,
.blog-filter-btn--active { color: #fff; }
.blog-filter-btn--active { background: #FFD200 !important; color: #fff !important; border-color: #FFD200 !important; }
.bp__tag--alt { color: #EDE8E0; }
.eq__mail { color: #fff; }
.btn--outline:hover, .service-cta-final .btn--outline:hover { color: #fff; }

/* 2. le bloc final : aplat rouge, texte blanc, bouton noir */
.service-cta-final { background: linear-gradient(135deg, #FFD200, #B00014); color: #fff; }
.service-cta-final h2, .service-cta-final h3, .service-cta-final p, .service-cta-final li { color: #fff; }
.service-cta-final .btn--primary, .service-cta-final .btn--primary.btn--lg,
.service-cta-final .btn--primary.btn--lg:hover { background: #121214; color: #fff; border-color: #121214; }
.service-cta-final .btn--outline { background: transparent; border-color: #fff; color: #fff; }
.service-cta-final .btn--outline:hover { background: #fff; color: #121214; border-color: #fff; }

/* 3. le mot mis en avant : couleur seule, aucun surlignage */
.accent, .ho { color: var(--acc-txt); background: none; background-image: none; padding: 0; }
.page-service__hero--cinema .page-service__hero__title .ho,
.page-service__hero--accueil .page-service__hero__title .ho,
.sector-hero--media .sector-hero__title .ho,
.res-hero__title .ho, .fq-hero .ho, .gl-hero .ho, .rf-hero .ho { color: #FFD200; background: none; padding: 0; }

/* Cartes claires posees dans un bloc sombre : elles reprennent l'encre sombre */
.pricing-leadgen__form, .pricing-leadgen__form h2, .pricing-leadgen__form h3,
.pricing-leadgen__form p, .pricing-leadgen__form label, .pricing-leadgen__form li,
.pricing-leadgen__form__title { color: #121214; --acc-txt: #E4BC00; }
.rp-stat__num { color: #121214; }
.bloc-sombre .rp-stat__num, .pricing-leadgen .rp-stat__num { color: #FFD200; }
.rp-stat .rp-stat__num { color: #121214; }
.fq-count, .fq-nav .lab, .fq-cat-head .desc { color: #605C55; }

/* Blocs sombres declares en ligne dans le HTML */
.bloc-sombre { --acc-txt: #FFD200; color: #F2F1EE; }
.bloc-sombre h1, .bloc-sombre h2, .bloc-sombre h3 { color: #fff; }

/* Liens de corps d'article */
.blog-article a:not(.btn):not([class*="cta"]) { color: #121214; text-decoration: underline; text-underline-offset: 2px; }
.blog-article thead a, .blog-article th a, .blog-article tr[style*="brand-dark"] a { color: #FFD200 !important; }
.conversion__note a, .pricing-leadgen a:not(.btn) { color: var(--acc-txt); }

/* Heros fixes : trame de bande de securite, filet rouge en pied */
.res-hero, .fq-hero, .gl-hero, .rf-hero { position: relative; background: #111214; border-bottom: 4px solid #FFD200; }
.res-hero::before, .fq-hero::before, .gl-hero::before, .rf-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255, 210, 0, .07) 0 22px, rgba(255, 210, 0, 0) 22px 52px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.res-hero > *, .fq-hero > *, .gl-hero > *, .rf-hero > * { position: relative; z-index: 1; }
.res-hero, .res-hero p, .fq-hero, .fq-hero p, .gl-hero, .gl-hero p, .rf-hero, .rf-hero p { color: #F2F1EE; }
.res-hero__title, .fq-hero h1, .gl-hero h1, .rf-hero h1 { color: #fff; }

/* Derniers reglages du rouge vif, mesures page par page :
   - les heros fixes sont sombres : leur surtitre prend le rouge clair ;
   - le rouge vif frole le seuil sur fond noir, on eclaircit d'un cran ;
   - un bouton plein pose sur fond clair garde son aplat rouge. */
.res-hero .kicker, .fq-hero .kicker, .gl-hero .kicker, .rf-hero .kicker,
.res-hero, .fq-hero, .gl-hero, .rf-hero { --acc-txt: #FFD200; }
.mz__sols { color: #FFD200; }
.site-header__cta.btn--primary, .site-header__cta.btn--primary:hover,
.page-service__hero__ctas .btn--primary, .mobile-menu__cta .btn--primary { background: #FFD200; color: #fff; border-color: #FFD200; }
.pv__ruban, .pv__ruban span, [class*="ruban"] span { color: #fff; }

/* -----------------------------------------------------------------
   L'univers carry : jaune securite sur noir.
   Trois regles tiennent l'ensemble :
   1. une surface jaune porte toujours du texte NOIR ;
   2. une surface noire porte du blanc ou du jaune vif ;
   3. le jaune ne s'ecrit jamais sur fond clair : le jeton --acc-txt
      passe alors a l'encre noire, et rebascule au jaune des que l'on
      entre dans un bloc sombre.
   ----------------------------------------------------------------- */
:root {
  --color-brand-primary: #FFD200;
  --color-brand-primary-strong: #E4BC00;
  --color-brand-dark: #1B1C1E;
  --color-ink: #2B2724;
  --acc: #FFD200; --acc-deep: #E4BC00; --acc-darker: #B89400;
  --acc-wash: #FBF4CE; --sand-acc: #B89400;
  --acc-txt: #121214;
}
.bp__c,
.cvis__l,
.dm__c,
.fq-hero,
.frm-ok,
.frm-p,
.fx__c,
.fxm__box,
.gl-hero,
.gm--fiches .gm__carte,
.gm--fiches .gm__photo,
.gm__carte,
.gm__detail,
.gr--questions .gr__grille,
.gr-bande,
.gr__i,
.hresp,
.lo__q,
.mo__c,
.of__cinq,
.of__p,
.page-service__hero--cinema,
.pb__b,
.preuve__media,
.proc-car__media,
.proc__frame .video-loop video,
.proc__frame video,
.pv__c,
.rc__b--roi,
.res-hero,
.rf-frow__media,
.rf-frow__media .video-loop video,
.rf-frow__media video,
.rf-hero,
.rf-reel,
.rf-reel .video-loop video,
.rf-reel video,
.robotcard__media,
.sector-hero--media,
.service-cta-final .btn--primary,
.service-cta-final .btn--primary.btn--lg,
.video-loop .video-loop__media,
.why-band__media .video-loop video,
.why-band__media video { --acc-txt: #FFD200; }
.site-footer, .site-footer * { --acc-txt: #FFD200; }
.atout,
.blog-card,
.btn--outline,
.cc .btn-outline-d,
.cc-est-sec,
.cc-pledge,
.cc-why,
.cc-why-card,
.ccol,
.ccol .opt-badge,
.cfaq .faq-item,
.cfg-top,
.clean-card,
.config,
.config-band__inner,
.conversion__form,
.cp__card[aria-pressed="true"],
.cp__fn,
.cp__q,
.cp__raz,
.cpx-pl__i img,
.cross-more > summary,
.env-card__robot,
.estimator,
.faq__item,
.field input:focus,
.fq-item,
.fq-link,
.fq-search,
.fq-sec,
.gl-alpha,
.gl-search,
.gl-sec,
.gr-glissiere__curseur,
.guarantees--energy .guarantee,
.hproof,
.implant-card,
.maillage__link,
.matrix-tags span,
.mobile-menu,
.nav-dropdown__menu,
.opt,
.page-service__hero__form,
.pitch-band__benefit,
.pricing-leadgen__form,
.qs-fiche,
.qs-fiche__c input,
.qs-fiche__c select,
.qs__pdf,
.qtextarea,
.rail-fleche,
.rc-tile,
.retour-haut,
.rf-pc,
.robot-card,
.robot-compare__table tr.is-current .robot-compare__chip,
.robotcard,
.rp-adv,
.rp-day li,
.rp-daytab,
.rp-kit,
.rp-solidcard,
.rp-stat,
.rp-tl,
.sect-pill,
.sector-card,
.sector-card-wrap,
.sector-chapter,
.service-cta-final .btn--primary,
.site-header__cta.btn--primary,
.sr-nav,
.temoignage { --acc-txt: #121214; }

/* 1. surfaces jaunes : texte noir */
.btn--primary, .btn--primary:visited { background: #FFD200; color: #121214; border-color: #FFD200; }
.btn--primary:hover { background: #E4BC00; color: #121214; border-color: #E4BC00; }
.btn--primary.btn--lg { color: #121214; }
.site-header__cta.btn--primary, .site-header__cta.btn--primary:hover,
.page-service__hero__ctas .btn--primary, .mobile-menu__cta .btn--primary,
.sector-hero--media .btn--primary, .materiel-ctas .btn--primary,
.materiel-ctas .btn--primary:hover, .qs__demo.btn--primary, .qs__demo.btn--primary:hover {
  background: #FFD200; color: #121214; border-color: #FFD200;
}
.site-header__cta.btn--primary:hover { background: #E4BC00; border-color: #E4BC00; }
.section-header__overline, .pricing-leadgen__content__overline, .section-header__eyebrow,
.sector-hero__eyebrow, .rp-eyebrow, .proxi__col--new .proxi__tag, .bp__tag, .eq__mail { color: #121214; }
.blog-filter-btn--active { background: #FFD200 !important; color: #121214 !important; border-color: #FFD200 !important; }
.bp__tag--alt { color: #EDE8E0; }
.btn--outline:hover, .service-cta-final .btn--outline:hover { color: #121214; }

/* 2. le bloc final : aplat jaune, texte noir, bouton noir a texte jaune */
.service-cta-final { background: linear-gradient(135deg, #FFD200, #E4BC00); color: #121214; }
.service-cta-final h2, .service-cta-final h3, .service-cta-final p, .service-cta-final li { color: #121214; }
.service-cta-final .btn--primary, .service-cta-final .btn--primary.btn--lg,
.service-cta-final .btn--primary.btn--lg:hover { background: #121214; color: #FFD200; border-color: #121214; }
.service-cta-final .btn--outline { background: transparent; border-color: #121214; color: #121214; }
.service-cta-final .btn--outline:hover { background: #121214; color: #FFD200; border-color: #121214; }

/* 3. le mot mis en avant : couleur seule, aucun surlignage */
.accent, .ho { color: var(--acc-txt); background: none; background-image: none; padding: 0; }
.page-service__hero--cinema .page-service__hero__title .ho,
.page-service__hero--accueil .page-service__hero__title .ho,
.sector-hero--media .sector-hero__title .ho,
.res-hero__title .ho, .fq-hero .ho, .gl-hero .ho, .rf-hero .ho { color: #FFD200; background: none; padding: 0; }
.mz__sols { color: #FFD200; }

/* Heros fixes : trame de bande de securite, filet jaune en pied */
.res-hero, .fq-hero, .gl-hero, .rf-hero { position: relative; background: #111214; border-bottom: 4px solid #FFD200; }
.res-hero::before, .fq-hero::before, .gl-hero::before, .rf-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255, 210, 0, .055) 0 22px, rgba(255, 210, 0, 0) 22px 52px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.res-hero > *, .fq-hero > *, .gl-hero > *, .rf-hero > * { position: relative; z-index: 1; }
.res-hero, .res-hero p, .fq-hero, .fq-hero p, .gl-hero, .gl-hero p, .rf-hero, .rf-hero p { color: #F2F1EE; }
.res-hero__title, .fq-hero h1, .gl-hero h1, .rf-hero h1 { color: #fff; }
.res-hero .kicker, .fq-hero .kicker, .gl-hero .kicker, .rf-hero .kicker,
.res-hero, .fq-hero, .gl-hero, .rf-hero { --acc-txt: #FFD200; }

/* Blocs sombres declares en ligne dans le HTML */
.bloc-sombre { --acc-txt: #FFD200; color: #F2F1EE; }
.bloc-sombre h1, .bloc-sombre h2, .bloc-sombre h3 { color: #fff; }
.bloc-sombre .rp-stat__num, .pricing-leadgen .rp-stat__num { color: #FFD200; }
.rp-stat__num, .rp-stat .rp-stat__num { color: #121214; }
.fq-count, .fq-nav .lab, .fq-cat-head .desc { color: #635C52; }

/* Cartes claires posees dans un bloc sombre */
.pricing-leadgen__form, .pricing-leadgen__form h2, .pricing-leadgen__form h3,
.pricing-leadgen__form p, .pricing-leadgen__form label, .pricing-leadgen__form li,
.pricing-leadgen__form__title { color: #121214; --acc-txt: #121214; }

/* Liens de corps d'article */
.blog-article a:not(.btn):not([class*="cta"]) { color: #121214; text-decoration: underline; text-underline-offset: 2px; }
.blog-article thead a, .blog-article th a, .blog-article tr[style*="brand-dark"] a { color: #FFD200 !important; }
.conversion__note a, .pricing-leadgen a:not(.btn) { color: var(--acc-txt); }

/* Le panneau des cinq questions : noir, ecriture jaune. Les questions
   et les reponses en jaune vif, le corps en jaune adouci pour garder
   la hierarchie de lecture. */
.gr--questions .gr__grille { background: #1B1C1E; }
.gr--questions .gr__i, .gr--questions .gr__corps { color: #F2DE8C; }
.gr--questions .gr__corps p, .gr--questions .gr__corps li { color: #F2DE8C; }
.gr--questions .gr__corps h3, .gr--questions .gr__corps strong,
.gr--questions .gr__i > *:first-child { color: #FFD200; }
.gr--questions [class*="__v"], .gr--questions .gr__cle { color: #FFD200; }
.gr--questions .gr__i + .gr__i { border-top: 1px solid rgba(255, 210, 0, .18); }

.gr--questions .gr__jeton { color: #FFD200; }

/* Bande « En chiffres » : l'unite et le sur-titre suivent le chiffre. (.pv__u, .pv__k suivent) */
.pv__u, .pv__k, .pv__n .pv__u { color: #FFD200; }

/* -----------------------------------------------------------------
   La bande de groupe : plus de degrade en biais. Une frontiere nette
   au milieu, dont le bord epouse l'arrondi de la pilule (meme rayon
   plein). A gauche le marine de clean, a droite le noir de carry.
   Chaque libelle de fonction porte la couleur de sa marque.
   ----------------------------------------------------------------- */
.gr-bande { background: #18344B; overflow: hidden; }
.gr-bande::after {
  content: ""; position: absolute; inset: 0 0 0 50%;
  background: #1B1C1E; border-radius: 999px 0 0 999px; z-index: 0;
}
.gr-bande .container { position: relative; z-index: 1; }
.gr-bande__fonction:first-child, .gr-bande__fonction:last-child { color: rgba(255, 255, 255, .92); }

/* La frontiere est ancree sur la pilule, pas sur le milieu de la fenetre :
   les deux libelles n'ont pas la meme largeur, la pilule n'est donc pas
   exactement centree. Le voile part du milieu exact de la pilule et
   deborde jusqu'au bord droit ; la bande le rogne. Sa hauteur vaut celle
   de la bande (pilule + les 7,2px de rembourrage haut et bas), ce qui
   donne un bord arrondi au meme rayon que le bouton. */
.gr-bande::after { display: none; }
.gr-glissiere::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: -7.2px; bottom: -7.2px; width: 100vw;
  background: #1B1C1E; border-radius: 999px 0 0 999px;
}

/* Le calculateur : la marque y entre franchement. Filet jaune en tete de
   carte, curseurs a la teinte, bandeau de resultats en noir a chiffres
   jaunes (comme la bande « En chiffres »), verdict sur lavis jaune. */
.calc-curseur { width: 100%; accent-color: #FFD200; height: 22px; }
.calc-res { color: #F2F1EE; border-radius: 12px; padding: 1.1rem 1.2rem; }
.calc-res span { color: #C9C3B9 !important; }
.calc-res strong { color: #FFD200 !important; }
.calc-res strong { color: #FFD200; }
.calc-verdict {
  background: #FBF4CE; border-left: 4px solid #FFD200;
  border-radius: 0 10px 10px 0; padding: .85rem 1rem; color: #121214;
}

/* -----------------------------------------------------------------
   Animations d'affichage.
   1. Les coches des listes d'arguments se dessinent quand le bloc
      entre dans l'ecran : le trait se trace, une fois, jamais en boucle.
   2. Les chiffres cles portent un anneau qui se ferme pendant que le
      compteur monte. L'arc est dessine en CSS, aucun ajout de balise.
   Les deux respectent prefers-reduced-motion.
   ----------------------------------------------------------------- */
.page-service__hero__bullets li svg polyline,
.sector-chapter__list li svg polyline,
.sector-hero__bullets li svg polyline,
.pricing-leadgen__content__features li svg polyline {
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.page-service__hero__bullets li.is-in svg polyline,
.sector-chapter__list li.is-in svg polyline,
.sector-hero__bullets li.is-in svg polyline,
.pricing-leadgen__content__features li.is-in svg polyline {
  animation: coche-trace .5s cubic-bezier(.65,0,.35,1) forwards;
}
.page-service__hero__bullets li:nth-child(2).is-in svg polyline { animation-delay: .12s; }
.page-service__hero__bullets li:nth-child(3).is-in svg polyline { animation-delay: .24s; }
@keyframes coche-trace { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .page-service__hero__bullets li svg polyline, .sector-chapter__list li svg polyline,
  .sector-hero__bullets li svg polyline, .pricing-leadgen__content__features li svg polyline { stroke-dashoffset: 0; animation: none; }
}

/* Le signe des accordeons pivote a l'ouverture : le plus devient une croix,
   comme celui des articles. Il manquait sur les pages FAQ. */
.fq-item .q .ic { display: inline-block; transition: transform .24s cubic-bezier(.65,0,.35,1), color .2s; }
.fq-item.open .q .ic { transform: rotate(45deg); }



/* Le separateur convoyeur : une bande de securite qui defile lentement. */
.convoyeur { height: 10px; border-radius: 3px; margin: 2.2rem 0 0;
  background-image: repeating-linear-gradient(115deg, #FFD200 0 14px, #1B1C1E 14px 28px);
  background-size: 200% 100%; animation: convoi 3.2s linear infinite; }
@keyframes convoi { from { background-position: 0 0; } to { background-position: -56px 0; } }
@media (prefers-reduced-motion: reduce) { .convoyeur { animation: none; } }

/* ---- La glissiere doit se voir, et s'annoncer ----
   Meme finition que sur easytocompost : le rail etait presque transparent,
   rien ne disait que le bouton coulisse. On le rend franchement visible
   (blanc translucide + lisere), et un leger va-et-vient du curseur invite
   au geste. L'animation porte sur « left », jamais sur « transform » :
   c'est transform qui porte la bascule et le survol, l'animer les
   casserait. Le clin d'oeil s'arrete des qu'on approche la souris. */
.gr-glissiere {
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 1px 3px rgba(20, 30, 45, .18);
}
.gr-glissiere:hover { background: rgba(255, 255, 255, .7); }
.gr-glissiere__curseur { box-shadow: 0 1px 4px rgba(20, 30, 45, .3); }
.gr-glissiere:not(:hover):not(:focus-within) .gr-glissiere__curseur {
  animation: gr-glisse 4.2s ease-in-out infinite;
}
@keyframes gr-glisse {
  0%, 74%, 100% { left: .2rem; }
  82% { left: .78rem; }
  90% { left: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-glissiere__curseur { animation: none !important; }
}

/* La manutention prend le jaune d'Easy to Carry, qui tient tres bien sur
   le marine du bandeau (8,87:1). Le nettoyage reste en blanc : le rouge de
   marque n'y atteint que 2,15:1, et les rouges eclaircis qui passeraient
   le seuil de lisibilite ne sont plus la couleur de la marque. */
.gr-bande__fonction:last-child { color: #FFD200; }

/* Correction : le clin d'oeil doit toujours designer l'AUTRE marque.
   Le curseur est a gauche quand la marque courante est la premiere
   (data-actif="0") : il pousse alors vers la droite. Quand il est deja a
   droite (data-actif="1", cas d'easytocarry), pousser encore a droite
   l'eloigne de la marque voisine ; il doit revenir vers la gauche. */
.gr-glissiere:not(:hover):not(:focus-within) .gr-glissiere__curseur { animation: none; }
.gr-glissiere[data-actif="0"]:not(:hover):not(:focus-within) .gr-glissiere__curseur {
  animation: gr-glisse-vers-droite 4.2s ease-in-out infinite;
}
.gr-glissiere[data-actif="1"]:not(:hover):not(:focus-within) .gr-glissiere__curseur {
  animation: gr-glisse-vers-gauche 4.2s ease-in-out infinite;
}
@keyframes gr-glisse-vers-droite {
  0%, 74%, 100% { left: .2rem; }
  82% { left: .78rem; }
  90% { left: .2rem; }
}
@keyframes gr-glisse-vers-gauche {
  0%, 74%, 100% { left: .2rem; }
  82% { left: -.38rem; }
  90% { left: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-glissiere__curseur { animation: none !important; }
}