@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: #6B5343; --color-brand-primary-strong: #6B5343; --color-brand-dark: #2E2419; --color-brand-light: #F5EDBF; --color-energy: #F5EDBF; --color-ink: #2E2419; --color-muted: #6B6151; --color-bg: #ffffff; --color-bg-soft: #FDFBF4; --color-line: #E3D9BE; --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(46, 36, 25,.12); --shadow-lift: 0 14px 36px -12px rgba(46, 36, 25,.22); --shadow-cta: 0 10px 22px -8px rgba(200, 219, 83,.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(--color-brand-primary-strong); 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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); } .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,#6B5343);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,#E3D9BE);border-radius:999px;background:var(--color-bg-soft,#FDFBF4);color:var(--color-navy,#2E2419);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,#6B5343);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(--color-brand-primary-strong); } .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: #F5EDBF; } .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(--color-brand-primary-strong); 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(--color-brand-primary-strong); 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(46, 36, 25,.34) 0%, rgba(46, 36, 25,.5) 38%, rgba(46, 36, 25,.7) 68%, rgba(46, 36, 25,.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(46, 36, 25,.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(46, 36, 25,.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(--color-brand-primary-strong); 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: #F5EDBF; 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(--color-brand-primary-strong); } .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(--color-brand-primary)} .robotcard__media{aspect-ratio:3/2;background:#2E2419;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(--color-brand-primary-strong)} .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(--color-brand-primary-strong)} .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(--color-brand-primary-strong); 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(--color-brand-primary-strong); font-weight: 600; } .fq .em { font-style: normal; color: var(--color-brand-primary-strong); font-weight: 600; } .fq-hero { position: relative; background: var(--color-brand-dark); color: #F5EDBF; 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(200, 219, 83,.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(--color-brand-primary); 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: #F5EDBF; 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: #C7BB9C; } .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: #C7BB9C; 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: #C7BB9C; } .fq-nav a.on .count { color: #E3D9BE; } .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: #C7BB9C; } .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: var(--ancre-decalage, 190px); } .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: #C7BB9C; 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(--color-brand-primary); } .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(--color-brand-primary-strong); 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(--color-brand-primary-strong); 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(--color-brand-primary); transform: translateY(-2px); } .sect-pill .ar { color: var(--color-brand-primary-strong); } @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(--color-brand-primary);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), #6B5343); color: #fff; text-align: center; } .service-cta-final__title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); } .service-cta-final__subtitle { color: #F5EDBF; 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(--color-brand-primary-strong); } .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: #F5EDBF; 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: #F5EDBF; font-size: .92rem; } .site-footer__col a:hover { color: var(--color-brand-primary); } .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: #F5EDBF; font-size: .85rem; } .site-footer__legal a:hover { color: var(--color-brand-primary); } @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: #C7BB9C; font-weight: 600; text-align: center; padding: 1rem; } .guarantees { background: var(--color-brand-dark); color: #F5EDBF; } .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: #F5EDBF; } .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: #F5EDBF; 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(--color-brand-primary-strong); } .materiel-link { display: inline-flex; align-items: center; gap: .4em; color: var(--color-brand-primary-strong); 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: #6B6151; } .guarantees--energy .guarantee { background: #fff; border: 1px solid rgba(46, 36, 25, .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(46, 36, 25, .38); } .guarantees--energy::before { opacity: .55; background-image: linear-gradient(rgba(46, 36, 25, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 36, 25, .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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); 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(200, 219, 83, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 219, 83, .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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); 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(46, 36, 25, .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: #F5EDBF; 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(--color-brand-primary-strong); 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(--color-brand-primary-strong); background: var(--color-brand-light); border-radius: var(--radius-pill); padding: .15em .7em; } .gl-entry__alt { font-size: .85rem; color: #C7BB9C; 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(--color-brand-primary-strong); } .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: #C7BB9C; 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: #C7BB9C; 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-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(--color-brand-primary-strong); 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: #FDFBF4; border: 1px solid #E3D9BE; border-radius: var(--radius-md); padding: 1rem 1.2rem; margin-bottom: 2rem; font-size: .9rem; color: #6B6151; } .legal__notice strong { color: #6B6151; } @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(--color-brand-primary-strong); 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(46, 36, 25,0) 45%, rgba(46, 36, 25,.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(--color-brand-primary-strong); 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: #E3D9BE; } .robot-compare__link { color: var(--color-brand-primary-strong); 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: #F5EDBF; 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:#F5EDBF;overflow:hidden} .rf-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 36%,rgba(200, 219, 83,.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(--color-brand-primary);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:#F5EDBF;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:#E3D9BE;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(--color-brand-primary);font-size:.58em;font-weight:700} .rf-kfig__k{font-size:.8rem;color:#E3D9BE;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:#2E2419} .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(--color-brand-primary-strong);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:#2E2419} .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:#F5EDBF;border-color:var(--color-brand-dark)} .rf-pc__tag{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-brand-primary-strong);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:#E3D9BE} .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(--color-brand-primary-strong)} .rf-pc--pro .rf-pc__li li::before{color:var(--color-brand-primary)} @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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); 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(--color-brand-primary); } .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(--color-brand-primary-strong); 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(--color-brand-primary-strong); 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%, #1d3d59 48%, #F5EDBF 100%); } .sector-hero--media .sector-hero__media { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(46, 36, 25,.82), rgba(46, 36, 25,.45) 62%, rgba(46, 36, 25,.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(--color-brand-primary-strong); 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-deep); font-weight: 700; } .briques-sec { background: var(--color-brand-dark); color: #F5EDBF; 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(--color-brand-primary-strong); 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: #F5EDBF; 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(--color-brand-primary-strong); 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(--color-brand-primary); 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(--color-brand-primary-strong); 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(46, 36, 25,.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(--color-brand-primary-strong); 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(--color-brand-primary-strong); 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(46, 36, 25,.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(--color-brand-primary); color: var(--color-brand-primary-strong); } .cfg-back[disabled] { opacity: 0; pointer-events: none; } .cfg-progress { flex: 1; height: 6px; background: #E3D9BE; 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: #C7BB9C; } .step .sx { width: 24px; height: 24px; border-radius: 50%; background: #E3D9BE; color: #C7BB9C; 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(--color-brand-primary-strong); } .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: #C7BB9C; 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 #E3D9BE; 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(--color-brand-primary); background: var(--color-bg-soft); } .opt.selected { border-color: var(--color-brand-primary); 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 #E3D9BE; border-radius: 10px; background: #fff; resize: vertical; min-height: 74px; } .qtextarea:focus { outline: none; border-color: var(--color-brand-primary); } .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 #E3D9BE; border-radius: 10px; background: var(--color-bg-soft); } .field input:focus { outline: none; border-color: var(--color-brand-primary); 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(--color-brand-primary-strong); 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(--color-brand-primary-strong); } .ctrl input[type=range] { width: 100%; accent-color: var(--color-brand-primary); } .cc-note { color: #6B5343; 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(--color-brand-primary); 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: #FDFBF4; color: #C7BB9C; 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: #6B5343; } .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: #6B5343; font-weight: 700; } .ccol.us { background: var(--color-brand-dark); color: #F5EDBF; border-color: var(--color-brand-dark); text-align: center; align-items: center; box-shadow: 0 10px 26px rgba(46, 36, 25,.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: #F5EDBF; } .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), #3F2F22); 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: #E3D9BE; 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: #F5EDBF; 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(--color-brand-primary-strong); font-weight: 600; } .est-result { background: linear-gradient(120deg, var(--color-brand-dark), #3F2F22); 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: #E3D9BE; } .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: #F5EDBF; 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: #E3D9BE; 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(--color-brand-primary); } .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(--color-brand-primary-strong); 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: #F5EDBF; 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(--color-brand-primary); } .cc-final p { color: #F5EDBF; 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(--color-brand-primary-strong); font-weight: 600; } .gl-hero { position: relative; background: var(--color-brand-dark); color: #F5EDBF; 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(200, 219, 83,.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(--color-brand-primary); 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: #F5EDBF; 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: #C7BB9C; } .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(--color-brand-primary); color: var(--color-brand-primary-strong); } .gl-alpha a.empty { color: #E3D9BE; background: transparent; border-color: transparent; pointer-events: none; } .gl-sec { padding: 48px 0 80px; background: #fff; } .gl-group { margin-bottom: 14px; scroll-margin-top: var(--ancre-decalage, 190px); } .gl-group.hidden { display: none; } .gl-letter { font-size: 26px; font-weight: 800; color: var(--color-brand-primary-strong); 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(--color-brand-primary-strong); background: var(--color-brand-light); border-radius: 20px; padding: 2px 9px; } .gl-entry .alt { font-size: 12.5px; color: #C7BB9C; 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(--color-brand-primary); color: var(--color-brand-primary-strong); } .gl-entry .links .lab { font-size: 12px; color: #C7BB9C; 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(--color-brand-primary-strong); 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(--color-brand-primary); } .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(--color-brand-primary-strong); } .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(--color-brand-primary-strong); 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,#2E2419);margin-right:.25rem} .gl-entry__links a{color:var(--color-brand-primary,#6B5343);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,#FDFBF4);box-shadow:0 8px 24px -12px rgba(46, 36, 25,.18)} .benefice-card__icon{width:28px;height:28px;color:var(--color-brand-primary,#6B5343);background:var(--color-energy-accent,#F5EDBF);border-radius:8px;padding:4px;margin-bottom:.75rem} .benefice-card__title{margin:0 0 .4rem;font-size:1.05rem;color:var(--color-brand-dark,#2E2419)} .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,#F5EDBF)} .temoignage__quote{margin:0 0 1rem;font-size:1.05rem;line-height:1.6;color:var(--color-brand-dark,#2E2419)} .temoignage__author{display:flex;flex-direction:column;font-size:.85rem} .temoignage__role{font-weight:600;color:var(--color-brand-dark,#2E2419)} .temoignage__desc{color:#6B6151} .temoignages__note{margin-top:1rem;font-size:.8rem;color:#C7BB9C;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,#6B5343);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,#2E2419)} .blog-cta-inline{margin:2rem 0;padding:1.5rem;border-radius:16px;background:var(--color-energy-accent,#F5EDBF);text-align:center} .blog-cta-inline p{margin:0 0 .75rem;font-weight:600;color:var(--color-brand-dark,#2E2419)} .blog-related{margin-top:3rem;border-top:1px solid var(--color-brand-light,#F5EDBF);padding-top:2rem} .blog-related__title{font-size:1.3rem;color:var(--color-brand-dark,#2E2419);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(--color-brand-primary-strong);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(10, 40, 80, .07);
}

/* 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(--color-brand-primary-strong);
}

/* CTA : contour bleu sur fond blanc, sans halo */
.site-header__cta.btn--primary {
  background: #fff;
  color: var(--color-brand-primary-strong);
  border-color: var(--color-brand-primary-strong);
  box-shadow: none;
  padding: .5em 1.15em;
}
.site-header__cta.btn--primary:hover {
  background: #FDFBF4;
  color: var(--color-brand-primary-strong);
  border-color: var(--color-brand-primary-strong);
  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: #2E2419;
}

/* 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(46, 36, 25, .84) 0%,
    rgba(46, 36, 25, .58) 46%,
    rgba(46, 36, 25, .18) 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: #E3D9BE;
  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: #FDFBF4;
  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(90deg,
      rgba(46, 36, 25, .84) 0%,
      rgba(46, 36, 25, .58) 46%,
      rgba(46, 36, 25, .18) 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: #6B5343;         /* fonds sombres */
  --acc-deep: #6B5343;    /* boutons, texte sur fonds clairs, blanc dessus 5,18:1 */
  --acc-darker: #55402F;  /* survol */
  --acc-wash: #F5EDBF;

  /* --- echelle de fonds, teinte 207 deg comme le reste du site --- */
  --bg-0: #FFFFFF;        /* 100 % */
  --bg-1: #FDFBF4;        /*  96,5 % */
  --bg-2: #FDFBF4;        /*  94,1 % */
  --bg-warm: #FDFBF4;     /*  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: #FDFBF4; }

/* ------------------------------------------------------------
   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(46, 36, 25, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 36, 25, .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: #2E2419;
}
.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-deep); }

.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-deep);
  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 (#6B6151) tombe a 4,35:1 sur le sable : on lui substitue
   un secondaire brun. Meme logique pour la rouille, ramenee a #55402F.
   ============================================================ */

:root {
  --sand: #E4E4DA;
  --sand-ink: #2E2419;      /* 12,32:1 sur le sable */
  --sand-muted: #6B6151;    /*  5,39:1 */
  --sand-acc: #55402F;      /*  5,78:1, la rouille #6B5343 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-deep);
  border-color: var(--acc-deep);
}

.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-deep);
}

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

/* ---------- 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: #2E2419; }
.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: #2E2419;
}
.pricing-leadgen__content__features svg { color: var(--acc); }
.rf-frow__li li::before {
  background: var(--acc-wash);
  border-color: var(--acc-deep);
}

/* ---------- Etiquettes de mise en avant ---------- */
.case-study__descriptor,
.case__ctx {
  background: var(--acc);
  color: #2E2419;
}
.cc-pledge b { background: var(--acc-wash); color: var(--acc-deep); }
.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(107, 122, 36, .3);
}
.ccol.us .opt-badge { background: var(--acc); color: #2E2419; 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-deep); }
.robot-compare__table tr.is-current { background: var(--acc-wash); }
.robot-compare__table tr.is-current .robot-compare__chip {
  background: #fff;
  border-color: #D3D2D0;
}
.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(--color-brand-primary-strong); }
.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: #FDFBF4;          /* 92,5 */
  --bg-2: #FDFBF4;          /* 81,6 */
  --color-bg-soft: #FDFBF4;
  --color-brand-light: #F5EDBF;   /* remplace le bleu pale #F5EDBF */

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

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

  /* le sable des sections descend d'un cran, sinon il se confond avec N2 */
  --sand: #F5EDBF;                /* 68,2 */
  --sand-ink: #2E2419;
  --sand-muted: #6B6151;
  --sand-acc: #55402F;            /* 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: #E3D9BE; }

/* ---------- 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-deep); }

/* 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(46, 36, 25, .30) 0%,
      rgba(46, 36, 25, .46) 30%,
      rgba(46, 36, 25, .74) 62%,
      rgba(46, 36, 25, .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(46, 36, 25, .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-deep);
  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: #2E2419;
  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(46, 36, 25, 0) 0%, rgba(46, 36, 25, .82) 58%, rgba(46, 36, 25, .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: #2E2419;
  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: #CBCBC0; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.gm__desc { margin: 0 0 .9rem; color: #E3D9BE; 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(236, 235, 232, .2); padding-top: .36rem;
}
.gm-spec__k { font-size: .72rem; color: #C7BB9C; }
.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(46, 36, 25, .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: #F5EDBF;
  --or-metal: linear-gradient(135deg, #A8801F 0%, #F5EDBF 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: #2E2419;
  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: #2E2419;
  font-size: .655rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(46, 36, 25, .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-deep); }
.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(46, 36, 25, 0) 25%,
    rgba(46, 36, 25, .55) 58%,
    rgba(46, 36, 25, .92) 82%,
    rgba(46, 36, 25, .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(46, 36, 25, .8), 0 2px 18px rgba(46, 36, 25, .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(46, 36, 25, .28) 0%,
      rgba(46, 36, 25, .72) 55%,
      rgba(46, 36, 25, .96) 82%,
      rgba(46, 36, 25, .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-deep); 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: #2E2419;
  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: #E3D9BE; 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-deep); font-weight: 600; font-size: .95rem; text-decoration: none; }

/* ---------- au survol : la forme s'inverse ---------- */
@media (hover: hover) {
  .gr__i:hover { background-color: #3F2F22; 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: #2E2419;
  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: #E3D9BE; 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: #F5EDBF; 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(248, 247, 245, .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-deep); color: var(--acc-deep); }

/* --- 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: #2E2419; 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: #C7BB9C; }
.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: #E3D9BE; 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(236, 235, 232, .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: #C7BB9C; 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(46, 36, 25, .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: #2E2419;
  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(46, 36, 25, .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: #E3D9BE; 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: #F5EDBF; 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(236, 235, 232, .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(236, 235, 232, .18);
  color: #C7BB9C; 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-deep); }
.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: #C7BB9C;
  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(46, 36, 25, .25) 0%, rgba(46, 36, 25, .78) 55%,
    rgba(46, 36, 25, .95) 82%, rgba(46, 36, 25, .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: #E3D9BE; }
.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-deep); }
.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: #2E2419; 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: #F5EDBF; 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: #2E2419; 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: #F5EDBF; font-size: .92rem; line-height: 1.62; }
.mo__l { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(236, 235, 232,.18); display: grid; gap: .5rem; }
.mo__l li { position: relative; padding-left: 1.25rem; color: #E3D9BE; 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-deep); 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: #2E2419; 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: #E3D9BE; 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-deep);
  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-deep); 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: #6B5343;
  --color-brand-primary-strong: #6B5343;
  --color-energy: #F5EDBF;
  --color-brand-light: #F5EDBF;
  --color-line: #E3D9BE;
  --shadow-sm: 0 1px 2px rgba(46, 36, 25, .05);
  --shadow-lift: 0 2px 6px -2px rgba(46, 36, 25, .08), 0 16px 34px -18px rgba(46, 36, 25, .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: #6B6151; }

/* ---------- le menu deroulant : aucun encadre ---------- */
.nav-dropdown__menu {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(46, 36, 25, .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-deep);
  padding-left: 1.5rem;
}
.nav-dropdown__menu a:hover::before { width: .7rem; }

.nav-dropdown__menu-item--featured {
  background: none;
  color: var(--acc-deep);
  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: #2E2419; 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(236, 235, 232, .16); color: #F5EDBF; }
.dm__c h3 { margin: 0 0 .55rem; font-size: 1.12rem; font-weight: 600; color: #fff; }
.dm__c p { margin: 0; color: #F5EDBF; font-size: .93rem; line-height: 1.65; }
.dm__pied { margin: 1.2rem 0 0; }
.dm__pied a { color: var(--acc-deep); 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-deep); 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-deep); }
.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: #2E2419;
  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(236, 235, 232, .18);
  color: #E3D9BE; 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: #2E2419; 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: #1C160F; } }
.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(236, 235, 232, .16); color: #F5EDBF; }
.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: #E3D9BE; letter-spacing: 0; }
.bp__l { display: block; margin: .6rem 0 1rem; color: #F5EDBF; 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-deep); 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-deep);
}
.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-deep); }
.lnk__g a:hover { border-color: var(--acc-deep); color: var(--acc-deep); }
.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-deep); 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-deep);
  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-deep); }
.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-deep); } }
/* 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-deep);
}
.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-deep);
}
.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-deep); 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-deep); color: var(--acc-deep); }
.cp__fn[aria-pressed="true"] { background: var(--acc-deep); border-color: var(--acc-deep); 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 #6B6151; 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-deep); }
.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-deep); color: var(--acc-deep); }

/* --- 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-deep); }
.cp__card:focus-visible { outline: 3px solid var(--acc-deep); outline-offset: 2px; }
.cp__card[aria-pressed="true"] { border-color: var(--acc-deep); 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-deep); 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-deep); }
.cp__tab[aria-pressed="true"] { color: var(--acc-deep); border-bottom-color: var(--acc-deep); }
.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-deep); 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: #F5EDBF; }
.cp__np { color: #6B6151; 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: #6B6151; 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-deep) 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-deep);
  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(236, 235, 232, .3);
  border-radius: 999px;
  color: #F5EDBF;
  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(107, 122, 36, .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-deep); }
@media (hover: hover) {
  .rp-section:not([style*="brand-dark"]) .reg__c:hover { border-color: var(--acc-deep); color: var(--acc-deep); 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(107, 122, 36, .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(107, 122, 36, .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(107, 122, 36, .19);
  }
}

.sector-chapter__klabel {
  color: var(--acc-deep);
  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-deep);
  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-deep); }
.rc__q p::after { content: "\00A0\00BB"; color: var(--acc-deep); }
.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: #2E2419; }
.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: #C7BB9C; }
.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-deep); 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: #E3D9BE; }
.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: #2E2419;
}

/* 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(46, 36, 25, .82), rgba(46, 36, 25, .45) 62%, rgba(46, 36, 25, .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: #2E2419;
}
.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-deep); 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-deep);
  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-deep);
  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-deep); }
.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-deep); 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-deep); 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-deep);
  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-deep);
  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: #2E2419;
}

/* 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: #2E2419;
  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-deep); }

/* ------------------------------------------------------------
   .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-deep);
  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-deep); }
.gm--fiches .gm__nom { color: var(--sand-ink); }
.gm--fiches .gm__punch { color: var(--acc-deep); 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-deep); }

/* 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 #FDFBF4
   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(107, 122, 36, .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-deep); 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-deep); }

/* ------------------------------------------------------------
   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-deep);
  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: #2E2419; }
.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-deep);
  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-deep);
  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(46, 36, 25, .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-deep); }
.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(46, 36, 25, .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(46, 36, 25, 0) 30%,
    rgba(46, 36, 25, .30) 62%,
    rgba(46, 36, 25, .74) 86%,
    rgba(46, 36, 25, .86) 100%);
}
.mz__c:hover .mz__voile,
.mz__c:focus-visible .mz__voile {
  background: linear-gradient(180deg,
    rgba(46, 36, 25, .12) 0%,
    rgba(46, 36, 25, .44) 58%,
    rgba(46, 36, 25, .82) 86%,
    rgba(46, 36, 25, .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-deep);
}
a.eq__c:hover .eq__region { color: var(--acc-deep); }

/* 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-deep); 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-deep); }

/* le panneau : une seule forme, la signature d'angles conservee */
.gr--questions .gr__grille {
  --r: clamp(22px, 3vw, 38px);
  display: block;
  background: #2E2419;
  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: #E3D9BE;
  font-size: clamp(.9rem, 1.1vw, .97rem);
  line-height: 1.6;
  max-width: 62ch;
}

@media (hover: hover) {
  .gr--questions .gr__i:hover { background-color: #3F2F22; }
  .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-deep); 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: #F5EDBF;
  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(200, 219, 83, .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(--color-brand-primary);
  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(--color-brand-primary-strong); font-weight: 600; }
.res-hero p { font-size: 17px; color: #F5EDBF; 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: #C7BB9C; 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-deep);
  color: #fff;
}
.res-hero__ctas .btn--primary:hover { background: var(--acc-darker, #3F2F22); border-color: var(--acc-darker, #3F2F22); }
.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-deep); }

/* ---------- 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-deep); }
.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(107, 122, 36, .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: #2E2419;
  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: #3F2F22; }
.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: #E3D9BE; 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-deep); }
.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-deep); }

/* 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-deep); }
.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(107, 122, 36, .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-deep); }
.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-deep); }
.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-deep);
}
.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: #C7BB9C;
  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(46, 36, 25, .40) 0%,
    rgba(46, 36, 25, .22) 30%,
    rgba(46, 36, 25, .08) 58%,
    rgba(46, 36, 25, .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(46, 36, 25, .85), 0 1px 3px rgba(46, 36, 25, .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(46, 36, 25, .32) 0%,
      rgba(46, 36, 25, .55) 45%,
      rgba(46, 36, 25, .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(46, 36, 25, .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-deep); 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-deep); }
.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-deep); text-decoration: underline; }
.grp__ext { font-size: .78em; opacity: .65; }
.grp__c--lien:hover { border-color: var(--acc-deep); }

/* 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(46, 36, 25, .74) 0%,
    rgba(46, 36, 25, .52) 38%,
    rgba(46, 36, 25, .14) 70%,
    rgba(46, 36, 25, 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-deep); }
.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-deep); 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-deep); 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: #2E2419;
  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 #2E2419, 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 #2E2419, 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 #2E2419;
}
.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-deep);
  box-shadow: none;
  text-decoration: none;
}
.btn--ghost:hover { background: transparent; color: var(--acc-darker, #3F2F22); 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-deep); }

/* 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, #3F2F22); 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-deep); }
.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-deep); }
.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(107, 122, 36, .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, #3F2F22); }

/* 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(46, 36, 25, .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, #2E2419);
}
.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: #C7BB9C;
}

/* « À 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: #C7BB9C;
}

/* 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-deep);
}

/* 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-deep); }
@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-deep) rgba(46, 36, 25, .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(46, 36, 25, .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(248, 247, 245, 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-deep);
  box-shadow: 0 6px 18px -8px rgba(46, 36, 25, .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: #A79B84;
  --or-clair: #F7F2E1;
  --or-metal: linear-gradient(135deg, #6B6151 0%, #F7F2E1 26%, #A79B84 52%, #F2F5F8 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: #2E2419; }

/* 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: #2E2419;
}

/* 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: #55402F;
  --or-clair: #F5EDBF;
  --or-metal: linear-gradient(135deg, #8C5527 0%, #F5EDBF 26%, #55402F 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: #2E2419;
  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(46, 36, 25, .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(46, 36, 25, .74) 0%, rgba(46, 36, 25, .34) 55%, rgba(46, 36, 25, 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: #3F2F22; }
.gr--questions .gr__i:hover { background-color: #3F2F22; }

/* 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: #2E2419;
}
.robotcard__label--best {
  background: linear-gradient(135deg, #8C5527 0%, #F5EDBF 26%, #55402F 52%, #F2DCC6 74%, #9A5E2C 100%);
  color: #2a1a0e;
}
.robotcard__label--neuf {
  background: linear-gradient(135deg, #6B6151 0%, #F7F2E1 26%, #A79B84 52%, #F2F5F8 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-deep);
  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(46, 36, 25, .66) 0%,
    rgba(46, 36, 25, .40) 42%,
    rgba(46, 36, 25, .10) 72%,
    rgba(46, 36, 25, 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(46, 36, 25, .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(46, 36, 25, .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-deep); font-variant-numeric: tabular-nums; }
.cpx-tete__j {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(46, 36, 25, .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-deep);
  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-deep);
  font-weight: 600;
  color: var(--acc-deep);
}
.cpx-case.is-on .cpx-case__n { color: var(--acc-deep); }
.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-deep); 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-deep);
}
.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-deep);
  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-deep); 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(46, 36, 25, .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: #C7BB9C; }
.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-deep); }

.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(107, 122, 36, .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-deep);
  color: var(--acc-deep);
  font-weight: 600;
}
.frm-reg__b[aria-pressed="true"] .frm-reg__k { background: var(--acc-deep); border-color: var(--acc-deep); }
.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, #2E2419, #2E2419);
  color: #fff;
  box-shadow: 0 14px 34px -22px rgba(46, 36, 25, .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 #2E2419;
}
.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 #2E2419;
}
.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: #C7BB9C; }
.frm-p__d { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: #E3D9BE; }

/* ---- 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-deep);
  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-deep); width: 1rem; height: 1rem; }
.frm-rgpd a { color: var(--acc-deep); 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, #2E2419, #2E2419);
  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: #E3D9BE; }

@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(46, 36, 25, .8);
}
.cvis img { display: block; width: 100%; height: auto; }
.cvis__l {
  padding: .95rem 1.1rem;
  background: linear-gradient(135deg, #2E2419, #2E2419);
  color: #E3D9BE;
  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-deep);
  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(46, 36, 25, .55);
  scrollbar-width: thin;
  scrollbar-color: var(--acc-deep) rgba(46, 36, 25, .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-deep); 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-deep); }

/* 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-deep); 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, #3F2F22);
  border-bottom: 0;
  border-left: 2px solid var(--color-line);
  margin-left: .25rem;
}
.mobile-menu__group > a:hover { color: var(--acc-deep); border-left-color: var(--acc-deep); }
.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-deep); color: var(--acc-deep); }

/* ============================================================
   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(46, 36, 25, .85), 0 1px 3px rgba(46, 36, 25, .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-deep); 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-deep); 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, #3F2F22);
}
.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-deep); 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, #3F2F22); }
.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, #3F2F22);
}
.dg-liste { margin: 0; padding-left: 1.1rem; }
.dg-liste li { font-size: .93rem; line-height: 1.55; color: var(--sand-ink, #3F2F22); 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(46, 36, 25, .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-deep);
  box-shadow: 0 10px 26px -14px rgba(107, 122, 36, .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(107, 122, 36, .45);
  animation: qs-halo 2.4s ease-out 3;
}
@keyframes qs-halo {
  0%   { box-shadow: 0 0 0 0 rgba(107, 122, 36, .45); }
  60%  { box-shadow: 0 0 0 .75rem rgba(107, 122, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 122, 36, 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-deep); 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(46, 36, 25,.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, #3F2F22);
}
.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 .qs-m__pts span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--color-muted);
  animation: dm-pulse 1.2s ease-in-out infinite;
}
.qs-m--attente .qs-m__pts span:nth-child(2) { animation-delay: .18s; }
.qs-m--attente .qs-m__pts 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 .qs-m__pts span { animation: none; opacity: .5; } }

.qs-jalon {
  align-self: center;
  font-size: .8rem;
  color: var(--acc-deep);
  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-deep); color: var(--acc-deep); }

.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-deep); color: var(--acc-deep); }
.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. */

/* La bande de groupe : une ligne fine au-dessus de l'en-tête, la glissière
   au centre. Elle existe à l'identique sur easytocarry : c'est elle qui
   donne la sensation d'un seul geste quand on change de marque. */
.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; left: .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); }
.gr-glissiere[data-actif="1"] .gr-glissiere__curseur { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .gr-glissiere__curseur { transition: none; } }

/* 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; }

/* 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); }

/* ==================== 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: var(--ancre-decalage, 190px); }
.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 #6B5343; }
.passerelle--carry { border-left: 5px solid #FFD200; }
.passerelle .btn { white-space: nowrap; }

/* 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, #2E2419 0%, #2E2419 49.4%, #2E2419 50.6%, #2E2419 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}}

/* Rouge vif sur fonds sombres : le rouge profond, lisible sur sable,
   tombait a 2:1 sur le marine. Les blocs sombres prennent la version
   claire de la teinte, comme le faisait l'orange avant. */
.em, .pv__k, .pv__v, .cs__titre .ho,
[class*="--dark"] .accent, [class*="--dark"] .ho { color: #E9D985; }

/* Un seul rouge sur le site : #6B5343. Il sert d'aplat (texte blanc
   dessus) comme de couleur de texte sur fond clair. Les blocs sombres
   prennent sa version claire #E9D985, seule facon d'y rester lisible. */
.em, .pv__k, .pv__v, .cs__titre .ho,
[class*="--dark"] .accent, [class*="--dark"] .ho { color: #E9D985; }

.gr--questions .gr__jeton, .gr--questions [class*="__v"] { color: #6B5343; }

/* Bande « En chiffres » : chiffre, unite et sur-titre tous au rouge de
   marque, d'un seul ton. */
.pv__v, .pv__u, .pv__k, .pv__n .pv__u { color: #6B5343; }

/* -----------------------------------------------------------------
   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: #2E2419; overflow: hidden; }
.gr-bande::after {
  content: ""; position: absolute; inset: 0 0 0 50%;
  background: #2E2419; 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: #2E2419; border-radius: 999px 0 0 999px;
}

/* Le logo du pied de page passe au format horizontal, comme sur carry :
   on le pilote par la largeur pour que le rapport 10,3:1 soit respecte. */
.site-footer__logo { height: auto; width: 100%; max-width: 260px; margin-bottom: 1rem; }

/* -----------------------------------------------------------------
   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); }


/* -----------------------------------------------------------------
   L'univers easytocompost : olive sur blanc casse.
   Meme systeme que les autres marques du groupe :
   une surface olive porte du texte blanc, un bloc sombre porte du
   blanc ou de l'olive clair, et l'olive plein ne s'ecrit jamais sur
   un fond sombre (il passe alors a sa version claire).
   ----------------------------------------------------------------- */
:root {
  --color-brand-primary: #6B5343;
  --color-brand-primary-strong: #6B5343;
  --color-brand-dark: #2E2419;
  --color-ink: #2E2419;
  --acc: #6B5343; --acc-deep: #55402F; --acc-darker: #3F2F22;
  --acc-wash: #F5EDBF; --sand-acc: #3F2F22;
}
.em, .pv__k, .pv__v, .pv__u, .cs__titre .ho,
.gr--questions .gr__jeton, .gr--questions [class*="__v"],
.bloc-sombre .accent, .bloc-sombre .ho, .site-footer .accent { color: #E9D985; }

/* En attendant les visuels compost : le heros repose sur un aplat de
   marque au lieu d'une image. Le voile prevu pour la video est neutralise. */
.page-service__hero.hero-uni { background-image: linear-gradient(160deg, #2E2419 0%, #2E2419 70%); background-color: #2E2419; }
.hero-uni .page-service__hero__media, .hero-uni .page-service__hero__media::after { display: none; }
.hero-uni .page-service__hero__title, .hero-uni .page-service__hero__subtitle,
.hero-uni .page-service__hero__bullets li { color: #F4F4EC; }
.hero-uni .page-service__hero__title { color: #fff; }
.hero-uni .ho { color: #E9D985; }
.hero-uni .page-service__hero__bullets li svg { color: #E9D985; }

/* Les blocs sombres de compost : encre claire, titres blancs, mot
   accentue en olive clair, listes lisibles. */
.bloc-sombre { color: #E9EBDC; }
.bloc-sombre h1, .bloc-sombre h2, .bloc-sombre h3,
.bloc-sombre .section-header__title { color: #fff; }
.bloc-sombre .section-header__subtitle, .bloc-sombre p, .bloc-sombre li { color: #D9DCC6; }
.bloc-sombre strong { color: #fff; }
.bloc-sombre .accent, .bloc-sombre .ho { color: #E9D985; }
.bloc-sombre .section-header__overline--light { background: rgba(200, 219, 83, .16); color: #E9D985; }
.proc { max-width: 52rem; margin: 1.6rem auto 0; display: grid; gap: .9rem; padding-left: 1.2rem; }
.proc li { line-height: 1.6; }

/* Le panneau des cinq questions de compost : fond olive profond,
   ecriture claire, reponses en olive clair. */
.gr--questions .gr__grille { background: #2E2419; }
.gr--questions .gr__i, .gr--questions .gr__corps p { color: #DCE0C6; }
.gr--questions .gr__corps h3 { color: #fff; }
.gr--questions .gr__jeton { color: #E9D985; }
.gr--questions .gr__i + .gr__i { border-top: 1px solid rgba(200, 219, 83, .18); }
.gr--questions .gr__liens a { color: var(--color-brand-dark); }

/* Les rangees illustrees de compost : l'image reçoit le meme arrondi et
   la meme ombre que les cartes, et la rangee se replie sous 860 px. */
.rf-frow__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.rf-frow__media { min-width: 0; }
@media (max-width: 860px) { .rf-frow { grid-template-columns: 1fr; gap: 24px; } .rf-frow--rev .rf-frow__media { order: 0; } }

/* Vignette des cartes de ressources : ratio constant, coins arrondis. */
.blog-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin-bottom: .9rem; display: block; }

/* Sur compost, les photos de heros couvrent toute la surface : sans video,
   c'est l'image qui doit remplir le cadre, cadree au centre. */
.page-service__hero__media > img,
.sector-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* -----------------------------------------------------------------
   Le heros de compost : deux colonnes. Le texte a gauche sur fond
   clair, la boucle de brassage a droite, en pleine couleur, sans
   voile. Sous 900 px, la video passe au-dessus du texte.
   ----------------------------------------------------------------- */
.hero-duo { background: linear-gradient(180deg, var(--bg-1, #FDFBF4), #fff); padding: clamp(2rem, 5vw, 4rem) 0 0; position: relative; }
.hero-duo__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero-duo__t { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: -.02em; color: var(--color-ink); margin: 0 0 1rem; }
.hero-duo__d { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; color: var(--color-muted); margin: 0 0 1.2rem; max-width: 34rem; }
.hero-duo__d strong { color: var(--color-ink); }
.hero-duo__pts { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .55rem; }
.hero-duo__pts li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.hero-duo__pts svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .18rem; color: var(--color-brand-primary); }
.hero-duo__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.hero-duo__gage { font-size: .86rem; color: var(--color-muted); margin: 0; }
.hero-duo__media { position: relative; }
.hero-duo__video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); background: #F5EDBF; }
.hero-duo__legende { position: absolute; left: 1rem; bottom: 1rem; background: rgba(46, 36, 25, .82); color: #fff; font-size: .78rem; font-weight: 600; padding: .38rem .7rem; border-radius: 999px; }
@media (max-width: 900px) {
  .hero-duo__in { grid-template-columns: 1fr; }
  .hero-duo__media { order: -1; }
}

/* Le mot-symbole de compost tient dans une bande bien plus courte que ceux de
   clean et carry (rapport 7,1 contre 10,3) : a hauteur egale il paraissait
   deux fois plus petit. On cale donc la LARGEUR sur la leur, 262 px dans la
   barre et 226 px sous 760 px, pour un poids visuel identique. */
.site-header__logo img { width: 262px; height: auto; }
@media (max-width: 760px) { .site-header__logo img { width: 226px; } }
.site-footer__logo { max-width: 320px; }

/* Le premier ecran de compost : heros, frise de logos et bande de chiffres
   doivent tenir ensemble au-dessus de la ligne de flottaison. */
.hero-duo { padding-top: clamp(1.2rem, 2.4vw, 2rem); }
.hero-duo__in { padding-bottom: clamp(1rem, 2vw, 1.6rem); align-items: center; }
.hero-duo__t { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .7rem; }
.hero-duo__d { font-size: clamp(.96rem, 1.2vw, 1.04rem); margin-bottom: .9rem; }
.hero-duo__pts { margin-bottom: 1rem; gap: .4rem; }
.hero-duo__ctas { margin-bottom: .8rem; }
/* Heros : deux moities franches. Le panneau video part du haut de la section
   et descend jusqu'a la frise de logos, bord a bord avec la fenetre a droite ;
   le texte est centre verticalement en face de lui. Aucun ecart orphelin en
   haut ou en bas, c'est ce qui donne l'alignement. */
.hero-duo { padding: 0; overflow-x: clip; }
.hero-duo__in { position: relative; display: flex; align-items: center; min-height: min(58vh, 530px); padding-bottom: 0; }
.hero-duo__txt { width: 52%; padding: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.5rem, 3.5vw, 3rem) clamp(1.6rem, 3.4vw, 2.6rem) 0; }
.hero-duo__media { position: absolute; top: 0; bottom: 0; left: 52%; right: calc(50% - 50vw); width: auto; margin: 0; overflow: hidden; border-radius: 0; background: #F5EDBF; }
.hero-duo__video { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; background: none; }
/* La pastille se cale sur la meme gouttiere que le texte de la colonne gauche. */
.hero-duo__legende { left: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1rem, 2vw, 1.6rem); }
/* Chaque mention de la ligne de reassurance reste d'un seul tenant. */
.hero-duo__gage { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; }
.hero-duo__gage strong { white-space: nowrap; }
@media (max-width: 900px) {
  .hero-duo__in { display: block; min-height: 0; }
  .hero-duo__txt { width: auto; padding: 1.4rem 0; }
  .hero-duo__media { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0 calc(50% - 50vw) 1.2rem; height: 44vh; }
}
.hero-duo .hproof { border-top: 1px solid var(--color-line); }
.hero-duo + .pv--bandeau { padding-top: clamp(1rem, 2vw, 1.6rem); padding-bottom: clamp(1rem, 2vw, 1.6rem); }

/* Galerie de terrain : trois photos de sites equipes, legendees. */
.galerie-terrain, .terrain-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.2rem auto 0; max-width: 900px; }
.galerie-terrain figure { margin: 0; position: relative; }
.galerie-terrain img { width: 100%; height: 168px; object-fit: cover; object-position: center 60%; border-radius: 12px; display: block; }
.galerie-terrain figcaption { position: absolute; left: .7rem; bottom: .7rem; background: rgba(17,18,20,.78); color: #fff; font-size: .74rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px; }
@media (max-width: 760px) { .galerie-terrain { grid-template-columns: 1fr 1fr; } .galerie-terrain figure:last-child { display: none; } }

/* Une boucle video dans une rangee illustree : meme traitement qu'une photo. */
.rf-frow__video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); background: #F5EDBF; }

/* La frise de logos, entre le heros et la bande de chiffres. */
.bande-logos { padding: 22px 0; background: #fff; }
.bande-logos .hproof { position: static; margin: 0; border: 0; }

/* Le bloc terrain : la galerie et les chiffres partagent la meme grille,
   la meme largeur et le meme rayon, pour que les colonnes s'alignent. */
.terrain-chiffres .pv__c { width: auto; margin: 0; }
.galerie-terrain img { border-radius: var(--radius-md); }
.terrain-chiffres .pv__c { border-radius: var(--radius-md); }
@media (max-width: 760px) { .terrain-chiffres { grid-template-columns: 1fr; } }

/* La derniere tuile du mur tient toute la largeur : une tuile orpheline
   en bas de grille donnait un vide a droite. */
.mz__c--large { grid-column: 1 / -1; grid-row: span 1; }
.mz__c--large .mz__nom { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }

/* Frise des etudes de cas : les fiches defilent vers la droite, on en ajoute
   autant qu'on veut sans casser la mise en page. La piste deborde du conteneur
   pour que la derniere fiche visible soit coupee et appelle le defilement. */
.edc__piste { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: .8rem; }
.edc__rail { display: flex; gap: 1.1rem; width: max-content; padding-inline: max(var(--pad), calc(50vw - var(--container) / 2 + var(--pad))); }
.edc__c { flex: 0 0 min(288px, 74vw); scroll-snap-align: start; display: flex; flex-direction: column; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); overflow: hidden; }
.edc__img { width: 100%; height: 118px; object-fit: cover; display: block; }
.edc__corps { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .85rem .8rem; flex: 1; }
.edc__kick { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #E9D985; }
.edc__t { font-size: .95rem; line-height: 1.25; margin: 0; color: #fff; }
.edc .edc__d { font-size: .8rem; line-height: 1.4; margin: 0; color: #D9DCC6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.edc__ch { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: auto; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.edc__n { display: block; font-size: 1rem; font-weight: 800; line-height: 1; color: #E9D985; }
.edc__u { display: block; max-width: 7.5rem; margin-top: .12rem; font-size: .64rem; line-height: 1.3; color: #B9BFA2; }
.edc__lien { margin: auto 0 0; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.edc .edc__lien a { color: #E9D985; font-weight: 700; font-size: .9rem; text-decoration: none; }
.edc .edc__lien a:hover { text-decoration: underline; }
.edc__tout { margin: 1rem 0 0; font-size: .9rem; }
.edc .edc__tout a { color: #E9D985; font-weight: 700; text-decoration: none; }
.edc .edc__tout a:hover { text-decoration: underline; }
.edc__piste::-webkit-scrollbar { height: 8px; }
.edc__piste::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; }
.edc__piste::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 999px; }

/* Page composteurs : la gamme et le nuancier. Les packshots sont sur fond
   blanc, donc "contain" sur un fond creme plutot que "cover" qui rognerait
   la machine. Les hauteurs sont fixees en CSS : sans cela, l'attribut
   height="" du HTML fait foi et l'image sort a sa taille naturelle. */
.gamme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.gamme__m { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.gamme__vue { background: #fff; }
.gamme__vue img { width: 100%; height: 232px; object-fit: contain; display: block; padding: 1rem; }
.gamme__txt { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.gamme__nom { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.gamme__d { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--color-muted); }
.gamme__lab { margin: .5rem 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-muted); }
.gamme__col { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.gamme__col li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.gamme__pastille { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--t); border: 1px solid rgba(0, 0, 0, .18); }
.gamme__nuancier { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin-top: 1.6rem; }
.gamme__nuancier figure { margin: 0; text-align: center; }
.gamme__nuancier img { width: 100%; height: 148px; object-fit: contain; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; display: block; }
.gamme__nuancier figcaption { margin-top: .4rem; font-size: .76rem; color: var(--color-muted); }
.rf-frow__media--picto { background: #F4F4EE; }
.rf-frow__media--picto img { height: 100%; object-fit: contain; padding: 1.4rem; box-shadow: none; }
@media (max-width: 900px) {
  .gamme { grid-template-columns: 1fr; }
  .gamme__nuancier { grid-template-columns: repeat(3, 1fr); }
}

/* Les visuels des lignes illustrees remplissent leur cadre 4/3 au lieu de
   sortir a leur hauteur naturelle et d'etre rognes par le haut. */
.rf-frow__media > img { height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.rf-frow__media--picto > img { object-fit: contain; }
/* Le heros de la page composteurs accepte une video comme un visuel fixe. */
.page-service__hero__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Le bloc etudes de cas reste une respiration, pas un chapitre : moins de
   marge verticale et un chapeau resserre. */
.edc { padding-block: clamp(2rem, 3.6vw, 2.8rem); }
.edc .section-header { margin-bottom: 1.1rem; }
.edc .section-header__title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.edc .section-header__subtitle { font-size: .92rem; }
.edc__piste { padding-bottom: .5rem; }
.hero-duo__sep { color: var(--color-line); font-weight: 400; }

/* Sept secteurs : la derniere rangee du mur porte deux tuiles de meme largeur
   (ecoles et collectivite) au lieu d'une seule pleine largeur. */
#votre-environnement .mz__c--e, #votre-environnement .mz__c--f { grid-column: span 6; }
@media (max-width: 1000px) {
  #votre-environnement .mz__c--e, #votre-environnement .mz__c--f { grid-column: span 3; }
}
@media (max-width: 700px) {
  #votre-environnement .mz__c--e, #votre-environnement .mz__c--f { grid-column: span 1; }
}

/* Les photos de terrain sont verticales : des rangees plus hautes evitent de
   les rogner jusqu'a la caricature. Rapport vise 1,6 au lieu de 2,1. */
#votre-environnement .mz__mur { grid-auto-rows: clamp(180px, 24vw, 232px); }
@media (max-width: 1000px) { #votre-environnement .mz__mur { grid-auto-rows: clamp(170px, 26vw, 215px); } }
@media (max-width: 700px) { #votre-environnement .mz__mur { grid-auto-rows: clamp(150px, 38vw, 200px); } }

/* Le logo client de l'etude de cas se pose sur un voile sombre : on le passe
   en blanc plein, sinon un logo noir disparait completement. */
#cas-decathlon .vd__logo img { filter: brightness(0) invert(1); opacity: .92; }

/* Cartes de la gamme : plus larges et surtout plus de place pour le packshot,
   c'est le produit qu'on vient voir, pas la fiche. */
#la-gamme .gm__carte { width: min(86vw, 396px); }
#la-gamme .gm__photo { aspect-ratio: 1 / 1; background-size: 82%; }
@media (max-width: 900px) { #la-gamme .gm__carte { width: min(88vw, 340px); } }

/* Les cinq questions : le panneau plein olive faisait un pave massif au milieu
   d'une page claire. On passe sur un panneau blanc, des filets fins entre les
   questions et un jeton en pastille pale : meme information, moitie moins de
   poids visuel. */
#questions .gr__grille { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(46, 36, 25, .04); overflow: hidden; }
#questions .gr__i { background: transparent; }
#questions .gr__i + .gr__i { box-shadow: none; border-top: 1px solid var(--color-line); }
#questions .gr__i:hover { background-color: #FAFAF6; }
#questions .gr__t { color: var(--color-ink); }
#questions .gr__p { color: var(--color-muted); }
#questions .gr__jeton, #questions .gr--questions .gr__jeton { color: var(--color-brand-primary); background: var(--acc-wash, #EEF1DC); padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; line-height: 1.3; display: inline-block; }
#questions .gr__i:hover .gr__jeton { color: var(--color-brand-primary); }
#questions .gr__titre .ho { color: var(--color-brand-primary); }

/* Les deux tuiles du bas sont deux fois plus larges que hautes : on leur donne
   la meme hauteur qu'a la tuile maitresse pour que la photo ne soit plus
   coupee en bandeau. */
#votre-environnement .mz__c--e, #votre-environnement .mz__c--f { grid-row: span 2; }
@media (max-width: 700px) { #votre-environnement .mz__c--e, #votre-environnement .mz__c--f { grid-row: span 1; } }

/* Packshots recadres a l'identique : carre blanc, machine toujours a la meme
   hauteur. La vignette montre donc l'image entiere, sans zoom ni fond creme. */
#la-gamme .gm__photo { background-size: contain; background-color: #fff; }

/* Les cinq questions : la reponse ne se deplie qu'au survol, la liste reste une
   suite de questions courtes. Sur ecran tactile, tout reste affiche. */
@media (hover: hover) {
  #questions .gr__p { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .26s ease, margin-top .38s ease; }
  #questions .gr__i:hover .gr__p, #questions .gr__i:focus-within .gr__p { max-height: 11rem; opacity: 1; margin-top: .5rem; }
  #questions .gr__i { transition: background-color .25s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  #questions .gr__p { transition: none; }
}
#questions .gr__jeton { text-align: center; }

/* La bande de la gamme doit rester collee sous l'en-tete pendant que la
   section defile : c'est ce qui transforme le defilement vertical en
   defilement horizontal. Sans cela, motion.js allonge la section de toute la
   course du ruban et le visiteur traverse un grand vide. */
#la-gamme .gm__pin__vue { position: sticky; top: 84px; }
@media (max-width: 900px) { #la-gamme .gm__pin__vue { position: static; } }

/* ============================================================
   Charte Easy to Compost — couleurs relevees dans le document de
   marque : jaune sable #E9D985, brun #997A66, vert #AFC97E, avec
   leurs versions claires #F5EDBF et #CFDEB3.

   Les trois couleurs de marque sont trop pales pour porter du texte
   (1,4 a 3,9:1 sur blanc). L'encre est donc le brun de marque
   assombri, et le bouton reprend le duo du logo : brun tres fonce
   avec le jaune sable dessus — 10,65:1, et il se detache du fond
   a 14,7:1. Le vert et le jaune restent les accents.
   ============================================================ */
:root {
  --color-brand-primary: #6B5343;
  --color-brand-primary-strong: #55402F;
  --color-brand-dark: #2E2419;
  --color-brand-light: #F5EDBF;
  --color-energy: #E9D985;
  --color-ink: #2E2419;
  --color-muted: #6B6151;
  --color-bg: #FDFBF4;
  --color-bg-soft: #F7F2E1;
  --color-line: #E3D9BE;
  --acc: #6B5343;
  --acc-deep: #55402F;
  --acc-darker: #3F2F22;
  --acc-wash: #F5EDBF;
  --sand-acc: #55402F;
  --bg-0: #FDFBF4;
  --bg-warm: #F7F2E1;
  /* couleurs de marque, disponibles pour les aplats et les accents */
  --jaune: #E9D985;
  --jaune-clair: #F5EDBF;
  --brun: #997A66;
  --brun-clair: #C2997D;
  --vert: #AFC97E;
  --vert-clair: #CFDEB3;
  --cta: #2E2419;
  --cta-fonce: #1C160F;
  --cta-texte: #E9D985;
  --shadow-cta: 0 10px 24px -10px rgba(46, 36, 25, .5);
}
body { background: var(--color-bg); }

/* Bouton d'action : le duo du logo, brun tres fonce et jaune sable. */
.btn--primary,
.site-header__cta,
.site-header .site-header__cta.btn--primary,
.qs .qs__demo.btn--primary,
.mobile-menu__cta .btn--primary,
.cs .btn--primary { background: var(--cta); color: var(--cta-texte); border-color: var(--cta); box-shadow: var(--shadow-cta); }
.btn--primary:hover,
.site-header__cta:hover,
.site-header .site-header__cta.btn--primary:hover,
.qs .qs__demo.btn--primary:hover { background: var(--cta-fonce); border-color: var(--cta-fonce); color: var(--cta-texte); }
/* Sur les blocs sombres, le bouton s'inverse : jaune sable, texte brun. */
.bloc-sombre .btn--primary,
.service-cta-final .btn--primary,
.page-service__hero--cinema .btn--primary { background: var(--jaune); color: var(--cta); border-color: var(--jaune); }
.bloc-sombre .btn--primary:hover,
.service-cta-final .btn--primary:hover,
.page-service__hero--cinema .btn--primary:hover { background: #DCC96A; color: var(--cta); border-color: #DCC96A; }

/* Sur fond sombre, les accents sont le vert et le jaune de la charte. */
.bloc-sombre .accent, .bloc-sombre .ho, .site-footer .accent,
.page-service__hero--cinema .page-service__hero__title .ho { color: var(--vert); }
.pv--bandeau .pv__v, .pv--bandeau .pv__u, .pv--bandeau .pv__k,
.edc__kick, .edc__n, .cs .vd__go { color: var(--jaune); }
.edc .edc__lien a, .edc .edc__tout a, .bp__go, .vd__go { color: var(--jaune); }

/* Correctifs de contraste, mesures dans le navigateur.
   Les blocs « appel final » et « etude de cas » sont sur un aplat clair
   #F5EDBF, pas sur du sombre : le bouton doit y rester brun. Seuls le
   heros cinema et les vrais blocs sombres inversent en jaune. */
.service-cta-final .btn--primary,
.cs .btn--primary { background: var(--cta); color: var(--cta-texte); border-color: var(--cta); }
.service-cta-final .btn--primary:hover,
.cs .btn--primary:hover { background: var(--cta-fonce); border-color: var(--cta-fonce); color: var(--cta-texte); }
/* Le titre et le texte de ces blocs clairs prennent l'encre. */
.service-cta-final, .service-cta-final .service-cta-final__title { color: var(--color-ink); }
.service-cta-final .service-cta-final__lead, .service-cta-final__subtitle { color: var(--color-muted); }
.cs .cs__titre, .cs .cs__sous { color: var(--color-ink); }
.cs .cs__titre .ho { color: var(--acc-deep); }
/* Le bouton secondaire doit rester lisible sur l'aplat clair. */
.service-cta-final .btn--ghost, .service-cta-final .btn--outline-w,
.cs .btn--ghost { color: var(--color-ink); border-color: var(--color-ink); background: transparent; }
/* Etiquette du comparatif : le contraste passait de justesse. */
.proxi__tag { background: var(--acc-darker); color: #fff; }

/* Heros : une seule couleur d'accent. Le mot mis en avant, les coches et le
   bouton partagent le jaune sable du logo ; le second bouton reste un simple
   contour blanc. Avant, l'accent etait vert, les coches brunes et le bouton
   jaune : trois couleurs pour une meme zone. */
.page-service__hero--cinema .page-service__hero__title .ho,
.page-service__hero--cinema .page-service__hero__title .accent { color: var(--jaune); }
.page-service__hero--cinema .page-service__hero__bullets svg { background: var(--jaune); color: var(--cta); stroke: currentColor; }
.page-service__hero--cinema .page-service__hero__bullets li { color: rgba(255, 255, 255, .94); }
.page-service__hero--cinema .page-service__hero__subtitle { color: rgba(255, 255, 255, .88); }
.page-service__hero--cinema .page-service__hero__subtitle strong { color: #fff; }
.page-service__hero--cinema .btn--outline,
.page-service__hero--cinema .btn--outline-w { color: #fff; border-color: rgba(255, 255, 255, .75); background: transparent; }
.page-service__hero--cinema .btn--outline:hover,
.page-service__hero--cinema .btn--outline-w:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Rééquilibrage : le brun occupait presque toute la surface, le jaune se
   limitait aux boutons. On donne au jaune sable les aplats de respiration —
   bande de chiffres, sections douces, pastilles de rubrique — pour qu'il
   devienne la deuxieme couleur du site et non un simple accent. */
.pv, .pv--bandeau { background: var(--jaune-clair); }
.rp-section--soft { background: var(--jaune-clair); }
.section-header__overline,
.mz__tete .section-header__overline,
.gr__kick, .rp-section .section-header__overline { background: var(--jaune); color: var(--cta); }
.section-header__overline--light { background: rgba(233, 217, 133, .18); color: var(--jaune); }
/* Les cartes de chiffres gardent le brun : c'est ce contraste qui fait
   ressortir les nombres en jaune. */
.pv__c { background: var(--color-brand-dark); }
/* Le bloc conversationnel et le formulaire prennent le jaune clair. */
.qs, .pricing-leadgen { background: var(--jaune-clair); }
.pricing-leadgen__form { background: #fff; }
/* Le jeton des questions passe sur le jaune de marque. */
#questions .gr__jeton { background: var(--jaune); color: var(--cta); }
/* Le pied de page garde le brun, mais son liseré haut devient jaune. */
.site-footer { border-top: 4px solid var(--jaune); }

/* ============================================================
   Configurateur de composteur : la scene a gauche, les reglages a
   droite. Le produit est un detourage pose en absolu sur la photo ;
   sa position et son echelle viennent de --g, --b et --h, definies
   par decor dans configurateur.js.
   ============================================================ */
.cfg { padding: clamp(2.4rem, 5vw, 4rem) 0; background: var(--color-bg); }
.cfg__grille { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.cfg__scene { display: flex; align-items: center; justify-content: center; height: clamp(320px, 40vw, 460px); padding: 4%; border-radius: var(--radius-lg);
  background: var(--jaune-clair); border: 1px solid var(--color-line); overflow: hidden; }
/* Le cadre a une hauteur definie : les limites en pourcentage de l'image s'y
   resolvent alors correctement, et le centrage est celui du conteneur flex.
   L'echelle relative des deux produits passe par transform. */
.cfg__produit { width: auto; height: auto; max-width: 100%; max-height: 100%; transform: scale(var(--z, .85));
  filter: drop-shadow(0 14px 18px rgba(46, 36, 25, .22));
  transition: width .3s ease; }

.cfg__panneau { display: grid; gap: 1.1rem; }
.cfg__bloc { border: 0; margin: 0; padding: 0; }
.cfg__legende { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: .55rem; padding: 0; }
.cfg__teintes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.cfg__teinte { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; cursor: pointer;
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 999px; font: inherit;
  font-size: .84rem; color: var(--color-ink); text-align: left; transition: border-color .2s ease, background .2s ease; }
.cfg__teinte:hover:not(:disabled) { border-color: var(--acc); }
.cfg__teinte.est-actif { border-color: var(--cta); background: var(--jaune-clair); font-weight: 600; }
.cfg__teinte:disabled { opacity: .4; cursor: not-allowed; }
.cfg__pastille { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--t);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.cfg__note { margin: .5rem 0 0; font-size: .78rem; color: var(--color-muted); }

.cfg__bascule { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .88rem; }
.cfg__case { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg__piste { flex: 0 0 auto; width: 44px; height: 25px; border-radius: 999px; background: var(--color-line);
  position: relative; transition: background .22s ease; }
.cfg__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(46, 36, 25, .35); transition: transform .22s ease; }
.cfg__case:checked + .cfg__piste { background: var(--cta); }
.cfg__case:checked + .cfg__piste::after { transform: translateX(19px); }
.cfg__case:focus-visible + .cfg__piste { outline: 3px solid var(--acc); outline-offset: 3px; }


.cfg__recap { display: grid; gap: .1rem; margin: .2rem 0 0; padding: .8rem .95rem;
  background: var(--jaune-clair); border-radius: var(--radius-md); }
.cfg__recap > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.cfg__recap > div + div { border-top: 1px solid rgba(46, 36, 25, .12); }
.cfg__recap dt { font-size: .82rem; color: var(--color-muted); margin: 0; }
.cfg__recap dd { margin: 0; font-size: .86rem; font-weight: 700; color: var(--color-ink); }
.cfg__devis { justify-self: start; }

@media (max-width: 900px) {
  .cfg__grille { grid-template-columns: 1fr; }
  .cfg__teintes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Collecte basse frequence : le schema habituel a gauche, le notre
   a droite, puis le partenaire qui vient chercher le compost.
   ============================================================ */
.bf { padding: clamp(2.4rem, 5vw, 4rem) 0; background: var(--jaune-clair); }
.bf__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: 1.4rem; }
.bf__cas { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.3rem 1.4rem;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.bf__cas--apres { border-color: var(--cta); box-shadow: 0 10px 30px -18px rgba(46, 36, 25, .5); }
.bf__tag { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
  background: var(--color-bg-soft); color: var(--color-muted); }
.bf__tag--fort { background: var(--jaune); color: var(--cta); }
.bf__schema { width: 100%; height: auto; display: block; }
.bf .bf__l { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--color-muted); }
.bf__n { margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--color-line);
  font-size: .88rem; color: var(--color-muted); }
.bf__n strong { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--color-ink); }
.bf__cas--apres .bf__n strong { color: var(--acc-deep); }
.bf__partenaire { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); }
.bf__partenaire .rf-frow__media { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .bf__duo { grid-template-columns: 1fr; } }

/* Le bloc « Combien ca coute ? » etait ecrit en clair : il vient d'un fond
   sombre chez clean, mais il repose ici sur l'aplat jaune. On lui rend
   l'encre du site. */
.pricing-leadgen .pricing-leadgen__content__title { color: var(--color-ink); }
.pricing-leadgen .pricing-leadgen__content__desc { color: var(--color-muted); }
.pricing-leadgen .pricing-leadgen__content__features { color: var(--color-ink); }
.pricing-leadgen .pricing-leadgen__content__features li { color: var(--color-ink); }
.pricing-leadgen .pricing-leadgen__content__features svg { color: var(--acc-deep); }
.pricing-leadgen .pricing-leadgen__content__overline { background: var(--jaune); color: var(--cta); }
.pricing-leadgen .pricing-leadgen__content__note { color: var(--color-muted); }

/* Etude de cas : le chapeau et la fiche reposent sur la photo, pas sur un
   aplat. Le texte y repasse donc en blanc, et le logo client retrouve ses
   couleurs sur une pastille claire au lieu d'etre aplati en silhouette. */
.cs .cs__titre, .cs .cs__sous { color: #fff; text-shadow: 0 1px 12px rgba(46, 36, 25, .55); }
.cs .cs__titre .ho { color: var(--jaune); }
.cs .section-header__overline { background: var(--jaune); color: var(--cta); }
#cas-decathlon .vd__logo img,
.vd__logo img { filter: none; opacity: 1; background: #fff; padding: .35rem .6rem;
  border-radius: 8px; height: clamp(26px, 3vw, 32px); }
.vd__t, .vd__ch li, .vd__ch li span { color: #fff; }
.vd__ch li { color: rgba(255, 255, 255, .82); }
.vd__ch li span { font-weight: 800; }
.cs .vd__go { color: var(--jaune); }

/* Mur des secteurs : plus de voile general sur la photo. Seul un degrade
   court reste sous le libelle, juste assez pour le detacher. */
.mz__voile { background: linear-gradient(to top, rgba(46, 36, 25, .82) 0%, rgba(46, 36, 25, .55) 22%, rgba(46, 36, 25, 0) 46%); }
.mz__c:hover .mz__voile, .mz__c:focus-visible .mz__voile { background: linear-gradient(to top, rgba(46, 36, 25, .86) 0%, rgba(46, 36, 25, .6) 24%, rgba(46, 36, 25, 0) 50%); }
.mz__img { filter: none; }
.mz__nom, .mz__sols { text-shadow: 0 1px 10px rgba(46, 36, 25, .8); }
.mz__sols { color: rgba(255, 255, 255, .94); }
.bf__logo { height: 34px; width: auto; display: block; margin: .5rem 0 .8rem; }

/* Etude de cas : le voile couvrait toute la photo d'un brun uniforme. On le
   concentre a gauche et en bas, la ou le texte se trouve ; la moitie droite de
   l'image reste nette et sans teinte. */
.cs .vd__voile { background:
  linear-gradient(100deg, rgba(46, 36, 25, .90) 0%, rgba(46, 36, 25, .74) 30%, rgba(46, 36, 25, .34) 56%, rgba(46, 36, 25, 0) 76%),
  linear-gradient(to top, rgba(46, 36, 25, .78) 0%, rgba(46, 36, 25, .30) 26%, rgba(46, 36, 25, 0) 48%); }
.cs .vd__photo img { filter: none; }

/* Cartes tarifaires : le montant etait ecrit dans la couleur de la carte.
   Il passe en jaune sable, la couleur qui porte les chiffres sur fond sombre. */
.bp__c .bp__n { color: var(--jaune); }
.bp__c .bp__u { color: rgba(255, 255, 255, .8); }
.bp__c .bp__k { color: rgba(255, 255, 255, .72); }
.bp__c .bp__l { color: rgba(255, 255, 255, .9); }
.bp__c .bp__tag { background: rgba(255, 255, 255, .14); color: #fff; }
.bp__c--reco .bp__tag { background: var(--jaune); color: var(--cta); }
.bp__c .bp__go { color: var(--jaune); }
.pv__k--suffixe { margin-left: -.06em; margin-right: .25rem; font-weight: 800; }

/* Un voile tres leger sur les tuiles de secteur : juste de quoi asseoir le
   libelle sans teinter la photo. Il se renforce un peu au survol. */
#votre-environnement .mz__voile { background:
  linear-gradient(to top, rgba(46, 36, 25, .66) 0%, rgba(46, 36, 25, .30) 26%, rgba(46, 36, 25, .06) 52%, rgba(46, 36, 25, .06) 100%); }
#votre-environnement .mz__c:hover .mz__voile,
#votre-environnement .mz__c:focus-visible .mz__voile { background:
  linear-gradient(to top, rgba(46, 36, 25, .74) 0%, rgba(46, 36, 25, .38) 28%, rgba(46, 36, 25, .12) 56%, rgba(46, 36, 25, .12) 100%); }

/* Galerie des installations : une mosaique reguliere, legende sous chaque
   photo. Les images sont de formats tres varies, on les cadre donc en 4/3. */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.gal__i { margin: 0; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.gal__i img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.gal__i figcaption { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem .7rem; }
.gal__k { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-deep); }
.gal__l { font-size: .84rem; color: var(--color-ink); }
@media (max-width: 640px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }

/* Bloc « collecte partout en France » : la carte a cote du partenaire. */
.cf { padding: clamp(2.4rem, 5vw, 4rem) 0; background: var(--jaune-clair); }
.cf__duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: 1.4rem; align-items: start; }
.cf__carte { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem 1.5rem; margin: 0; }
.cf__logo { height: 34px; width: auto; display: block; margin-bottom: .8rem; }
.cf__t { margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.25; color: var(--color-ink); }
.cf .cf__d { margin: 0 0 .9rem; font-size: .94rem; line-height: 1.6; color: var(--color-muted); }
.cf__li { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cf__li li { position: relative; padding-left: 1.1rem; font-size: .92rem; line-height: 1.55; color: var(--color-muted); }
.cf__li li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.cf__li strong { color: var(--color-ink); }
.cf__go { margin: 1rem 0 0; }
.cf .cf__go a { color: var(--acc-deep); font-weight: 700; font-size: .92rem; text-decoration: none; }
.cf .cf__go a:hover { text-decoration: underline; }
.cf__carte--carte { padding: .8rem .8rem 1rem; }
.cf__carte--carte img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.cf__carte--carte figcaption { margin-top: .7rem; font-size: .86rem; line-height: 1.5; color: var(--color-muted); }
.cf__carte--carte figcaption strong { color: var(--color-ink); }
.cf__terrain { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); }
.cf__terrain .rf-frow__media { border-radius: var(--radius-lg); overflow: hidden; }
.page-service__hero__badge { display: inline-block; margin-bottom: .8rem; padding: .32rem .8rem; border-radius: 999px;
  background: var(--jaune); color: var(--cta); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
@media (max-width: 860px) { .cf__duo { grid-template-columns: 1fr; } }

/* Manifeste : un aplat brun, le mot « easy » du logo en jaune sable. */
.manifesto--quiet { background: var(--color-brand-dark); }
.manifesto--quiet .manifesto__inner h2 { color: #FDFBF4; }
.manifesto--quiet .manifesto__inner .em { color: var(--jaune); }
.manifesto--quiet .mot-easy { color: var(--jaune); fill: var(--jaune); }

/* ============================================================
   Bloc estimation : fini le pave jaune continu. La section passe
   sur le creme du site, le texte s'aligne en haut du formulaire,
   et le parcours devient trois etapes numerotees qui se revelent
   en escalier au defilement.
   ============================================================ */
.cs { padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.pricing-leadgen { background: var(--color-bg); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.pricing-leadgen__inner { align-items: flex-start; gap: clamp(1.6rem, 3.5vw, 3rem); }
.pricing-leadgen__form { border: 1px solid var(--color-line); }
.plg-etapes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .65rem; }
.plg-etapes li { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(46, 36, 25, .05); }
.plg-etapes li > span { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  background: var(--jaune); color: var(--cta); font-weight: 800; font-size: .86rem;
  display: grid; place-items: center; margin-top: .1rem; }
.plg-etapes b { display: block; font-size: .95rem; line-height: 1.35; color: var(--color-ink); }
.plg-etapes p { margin: .18rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--color-muted); }
.plg-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.plg-chips span { background: var(--jaune-clair); border: 1px solid var(--jaune);
  color: var(--color-ink); font-size: .78rem; font-weight: 600; padding: .32rem .8rem; border-radius: 999px; }

/* ============================================================
   Collecte basse frequence, version claire : fond creme, un
   parcours en quatre etapes reliees par un pointille, les deux
   schemas conserves mais alleges, un verdict chiffre sur brun,
   et l'exutoire en carte photo/texte.
   ============================================================ */
.bf { background: var(--color-bg); padding: clamp(2.6rem, 5vw, 4.2rem) 0; }
.bf__parcours { list-style: none; counter-reset: etape; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.8rem 0 0; padding: 0; position: relative; }
.bf__etape { position: relative; text-align: center; padding: 1.1rem 1rem 1.2rem;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(46, 36, 25, .05); counter-increment: etape; }
.bf__etape::before { content: counter(etape, decimal-leading-zero); position: absolute; top: .65rem; left: .8rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--brun-clair); }
.bf__etape + .bf__etape::after { content: ""; position: absolute; top: 50%; left: calc(-1rem - 1px); width: 1rem;
  border-top: 2px dashed var(--jaune); }
.bf__ico { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto .65rem;
  border-radius: 50%; background: var(--jaune); }
.bf__ico svg { width: 32px; height: 32px; }
.bf__etape b { display: block; font-size: .96rem; line-height: 1.3; color: var(--color-ink); }
.bf__etape p { margin: .3rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--color-muted); }

.bf__duo { margin-top: 1.4rem; }
.bf__cas { gap: .55rem; padding: 1rem 1.1rem 1.1rem; }
.bf__cas .bf__n { display: none; }

.bf__verdict { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .6rem 1.4rem; margin-top: 1.2rem; padding: 1.05rem 1.4rem;
  background: var(--color-brand-dark); border-radius: var(--radius-lg); color: rgba(255, 255, 255, .82); }
.bf__v-avant, .bf__v-apres { font-size: .95rem; }
.bf__v-avant b, .bf__v-apres b { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.bf__v-avant b { color: rgba(255, 255, 255, .55); text-decoration: line-through;
  text-decoration-thickness: 3px; text-decoration-color: var(--jaune); }
.bf__v-apres b { color: var(--jaune); }
.bf__v-fleche { font-size: 1.5rem; color: var(--jaune); }
.bf__v-note { flex-basis: 100%; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .72); }
@media (min-width: 900px) { .bf__v-note { flex-basis: auto; margin-left: .6rem;
  padding-left: 1.4rem; border-left: 1px solid rgba(255, 255, 255, .22); } }

.bf__exutoire { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.bf__ex-txt { padding: clamp(1.4rem, 3vw, 2.2rem); }
.bf__ex-t { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; color: var(--color-ink); }
.bf .bf__ex-d { margin: 0 0 1rem; font-size: .95rem; line-height: 1.65; color: var(--color-muted); }
.bf__ex-li { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bf__ex-li li { position: relative; padding-left: 1.15rem; font-size: .92rem; line-height: 1.55; color: var(--color-muted); }
.bf__ex-li li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 1.5px var(--brun); }
.bf__ex-li strong { color: var(--color-ink); }
.bf__ex-photo { margin: 0; }
.bf__ex-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .bf__parcours { grid-template-columns: repeat(2, 1fr); }
  .bf__etape + .bf__etape::after { display: none; }
  .bf__exutoire { grid-template-columns: 1fr; }
  .bf__ex-photo img { aspect-ratio: 16 / 10; height: auto; }
}
/* Bloc collecte allege : trois temps seulement — le parcours, le verdict,
   l'exutoire — avec des respirations resserrees. */
.bf__parcours { margin-top: 1.6rem; }
.bf__verdict { margin-top: 1rem; }
.bf__exutoire { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* ============================================================
   Collecte, version aeree : plus une seule boite. Les quatre pas
   sont nus, relies par un pointille qui traverse les pastilles ;
   le verdict est une ligne typographique ; l'exutoire pose photo
   et texte a meme le fond.
   ============================================================ */
.bf__fil { list-style: none; margin: 2.2rem 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.bf__fil::before { content: ""; position: absolute; top: 29px; left: 11%; right: 11%;
  border-top: 2px dashed var(--jaune); }
.bf__pas { position: relative; text-align: center; background: none; border: 0; box-shadow: none; padding: 0; }
.bf__pas .bf__ico { position: relative; width: 58px; height: 58px; margin: 0 auto .8rem;
  border-radius: 50%; background: var(--jaune); display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--color-bg); }
.bf__pas b { display: block; font-size: 1rem; line-height: 1.3; color: var(--color-ink); }
.bf__pas p { margin: .35rem auto 0; max-width: 24ch; font-size: .84rem; line-height: 1.5; color: var(--color-muted); }

.bf__verdict2 { margin: clamp(2rem, 4vw, 2.8rem) 0 0; text-align: center;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem .7rem; }
.bf__v52 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--brun-clair);
  text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--jaune); }
.bf__vfl { font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--brun); transform: translateY(-.1em); }
.bf__verdict2 strong { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; line-height: 1; color: var(--color-ink); }
.bf__vu { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; color: var(--color-ink); }
.bf__verdict2 small { flex-basis: 100%; margin-top: .3rem; font-size: .88rem; color: var(--color-muted); }

.bf__exutoire--nu { background: none; border: 0; border-radius: 0; overflow: visible;
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.bf__exutoire--nu .bf__ex-txt { padding: 0; }
.bf__exutoire--nu .bf__ex-photo img { height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); }
@media (max-width: 860px) {
  .bf__fil { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .bf__fil::before { display: none; }
}

/* Le verdict devient le point d'orgue du bloc : grande respiration au-dessus
   et en dessous, un chapeau discret, le chiffre en tres grand corps, et deux
   segments pointilles qui le raccrochent a la frise. */
.bf__verdict2 { display: block; margin: clamp(3rem, 6vw, 4.6rem) 0; text-align: center; }
.bf__vk { display: block; margin-bottom: .7rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brun-clair); }
.bf__vligne { display: flex; align-items: baseline; justify-content: center;
  gap: .3rem .8rem; margin: 0; }
.bf__vligne::before, .bf__vligne::after { content: ""; align-self: center;
  width: clamp(2rem, 6vw, 4.5rem); border-top: 2px dashed var(--jaune); }
.bf__vligne::before { margin-right: .6rem; }
.bf__vligne::after { margin-left: .6rem; }
.bf__v52 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.bf__verdict2 strong { font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 800;
  line-height: 1; color: var(--color-ink); }
.bf__vu { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--color-ink); }
.bf__verdict2 small { display: block; margin-top: .8rem; font-size: .92rem; color: var(--color-muted); }
@media (max-width: 640px) { .bf__vligne::before, .bf__vligne::after { display: none; } }

/* Cartes d'atouts posees sur un bloc sombre : elles gardaient l'encre des
   sections claires, brun sur brun. On les passe en verre fume, texte clair,
   numero jaune — la regle couvre composteurs, jardin et composteur-seul. */
.bloc-sombre .rp-adv { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.bloc-sombre .rp-adv h3 { color: #fff; }
.bloc-sombre .rp-adv p { color: rgba(255, 255, 255, .8); }
.bloc-sombre .rp-adv__ic { color: var(--jaune); background: rgba(233, 217, 133, .14); }
/* Le schema de la colonne est un PNG a fond blanc : son cadre devient blanc
   lui aussi, avec un simple filet, pour que les deux se fondent. */
.rf-frow__media--picto { background: #fff; border: 1px solid var(--color-line); }

/* Construction : l'illustration anti-rongeurs de la marque a gauche, les
   quatre points en 2 x 2 a droite. L'humour du visuel porte l'argument,
   le texte reste factuel. */
#construction .construction__duo { display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; margin-top: 1.5rem; }
#construction .construction__visuel { margin: 0; }
#construction .construction__visuel img { width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
#construction .construction__duo .rp-advgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 860px) {
  #construction .construction__duo { grid-template-columns: 1fr; }
  #construction .construction__visuel { max-width: 420px; margin: 0 auto; }
}

/* Heros des pages produit : raccourcis pour que la bande de chiffres
   apparaisse dans le premier ecran. */
#abc.page-service__hero--cinema,
#jardin.page-service__hero--cinema,
#offre.page-service__hero--cinema { min-height: clamp(440px, 62vh, 620px); }
#abc.page-service__hero--cinema > .container,
#jardin.page-service__hero--cinema > .container,
#offre.page-service__hero--cinema > .container { padding-bottom: 2rem; }
/* Le visuel et la grille 2x2 partagent exactement les memes bords :
   colonnes etirees, rangees egales, image en remplissage. */
#construction .construction__duo { align-items: stretch; }
#construction .construction__visuel { display: flex; }
#construction .construction__visuel img { height: 100%; object-fit: cover; }
#construction .construction__duo .rp-advgrid { height: 100%; grid-auto-rows: 1fr; }
/* Heros composteurs : la photo est verticale, on cale la fenetre visible sur
   le composteur plutot que sur la facade. */
#abc .page-service__hero__media > img { object-position: 50% 58%; }
/* Video du brassage : on cadre sur la fenetre de brassage et on coupe le bas
   du plan (socle et sol), qui n'apporte rien. */
#brassage .rf-frow__media video { height: 134%; object-fit: cover; object-position: 50% 0; }

/* ============================================================
   Sommaire epingle des pages produit : une barre de pastilles qui
   suit la lecture, collee sous l'en-tete et le bandeau de marque.
   ============================================================ */
.ancres { position: sticky; top: 123px; z-index: 60;
  background: rgba(253, 251, 244, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--color-line); }
.ancres__in { display: flex; gap: .45rem; padding-block: .55rem; overflow-x: auto; scrollbar-width: none; }
.ancres__in::-webkit-scrollbar { display: none; }
.ancres__l { flex: 0 0 auto; padding: .38rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .82rem; font-weight: 600; color: var(--color-muted); border: 1px solid transparent;
  transition: color .2s ease, background .2s ease; }
.ancres__l:hover { color: var(--color-ink); background: var(--jaune-clair); }
.ancres__l.est-actif { background: var(--jaune); color: var(--cta); }
/* les sections visees s'arretent sous la barre */
main [data-ancre] { scroll-margin-top: var(--ancre-decalage, 190px); }

/* Galerie : un leger zoom au survol, dans le cadre. */
.gal__i img { transition: transform .45s cubic-bezier(.2, .6, .2, 1); }
.gal__i:hover img { transform: scale(1.05); }

/* ============================================================
   Made in Picardie : l'atelier en trois images, sur fond de nef.
   La photo de la halle sert de decor, tres assombrie : elle donne
   l'echelle sans disputer l'attention aux trois vues de fabrication.
   ============================================================ */
.mip { position: relative; background: var(--color-brand-dark); color: #fff; overflow: hidden; }
.mip__fond { position: absolute; inset: 0; background: url('../img/compost/atelier/halle-atelier.jpg') center 40% / cover no-repeat;
  opacity: .17; }
.mip::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,36,25,.55) 0%, rgba(46,36,25,.86) 55%, rgba(46,36,25,.96) 100%); }
.mip__in { position: relative; z-index: 1; }

.mip__tete { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mip__k { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jaune); margin-bottom: .9rem; }
.mip__t { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; font-weight: 700; color: #fff; }
.mip__ho { color: var(--jaune); }
.mip__d { margin: 0; font-size: clamp(1rem, 1.5vw, 1.12rem); color: rgba(255,255,255,.82); max-width: 62ch; }

.mip__mos { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: clamp(.7rem, 1.4vw, 1.1rem); }
.mip__f { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden;
  height: clamp(300px, 34vw, 470px); background: rgba(255,255,255,.06); }
.mip__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mip__f--large img { object-position: 50% 45%; }
.mip__f figcaption { position: absolute; inset: auto 0 0 0; padding: 2.6rem .95rem .9rem;
  background: linear-gradient(180deg, rgba(28,22,15,0) 0%, rgba(28,22,15,.82) 62%); }
.mip__fk { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--jaune); }
.mip__fl { display: block; font-size: .88rem; color: rgba(255,255,255,.9); line-height: 1.35; margin-top: .12rem; }

.mip__args { list-style: none; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.mip__args li { font-size: .95rem; color: rgba(255,255,255,.78); line-height: 1.5;
  padding-top: .9rem; border-top: 1px solid rgba(233,217,133,.32); }
.mip__args strong { display: block; color: #fff; font-weight: 600; margin-bottom: .18rem; }

@media (max-width: 900px) {
  .mip__mos { grid-template-columns: 1fr 1fr; }
  .mip__f--large { grid-column: 1 / -1; height: clamp(280px, 60vw, 420px); }
  .mip__args { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mip__mos { grid-template-columns: 1fr; }
  .mip__f { height: 280px; }
  .mip__args { grid-template-columns: 1fr; }
}

/* ============================================================
   Documents telechargeables : l'apercu reel de la fiche, pose comme
   une feuille, et ce qu'elle contient annonce avant le clic.
   ============================================================ */
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
.docs__c { margin: 0; }
.docs__lien { display: grid; grid-template-columns: minmax(120px, .38fr) 1fr; gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start; height: 100%; padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  color: var(--color-ink); text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.6,.2,1), box-shadow .28s ease, border-color .28s ease; }
.docs__lien:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--jaune); }

.docs__vue { display: block; border-radius: 6px; overflow: hidden; background: #fff;
  border: 1px solid var(--color-line); box-shadow: 0 8px 20px -10px rgba(46,36,25,.4);
  transition: box-shadow .28s ease; }
.docs__lien:hover .docs__vue { box-shadow: 0 14px 30px -10px rgba(46,36,25,.5); }
.docs__vue img { display: block; width: 100%; height: auto; }

.docs__txt { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.docs__k { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-brand-primary); }
.docs__t { display: block; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25;
  margin: .28rem 0 .5rem; }
.docs__d { display: block; font-size: .95rem; color: var(--color-muted); line-height: 1.55; }
.docs__pts { display: flex; flex-direction: column; gap: .3rem; margin: .9rem 0 1.2rem; }
.docs__pts span { position: relative; padding-left: 1.15rem; font-size: .88rem; color: var(--color-ink); line-height: 1.4; }
.docs__pts span::before { content: ''; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); }

.docs__dl { margin-top: auto; display: inline-flex; flex-direction: column; gap: .12rem;
  padding: .68rem 1.15rem; border-radius: var(--radius-pill);
  background: var(--cta); color: var(--cta-texte); font-weight: 600; font-size: .95rem; }
.docs__meta { font-size: .74rem; font-weight: 400; color: rgba(233,217,133,.72); letter-spacing: .01em; }

@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .docs__lien { grid-template-columns: 1fr; }
  .docs__vue { max-width: 180px; }
}

/* ============================================================
   LANGAGE « PAGE NEUVE » — modernisation des gabarits.
   ------------------------------------------------------------
   Tout est porte par .page-neuve, posee sur le <body> des pages
   deja reprises : la feuille sert quarante gabarits, on
   n'y touche pas globalement. Un niveau de specificite en plus,
   aucun !important, et la refonte s'annule en retirant la classe.

   Le principe : la decoration (pastilles pleines, puces rondes,
   cartes ombrees) cede la place a des filets, des capitales fines
   et des chiffres nus. Ce qui portait la hierarchie par la couleur
   la porte desormais par la taille et par le vide.

   NE JAMAIS convertir un min-height en height ici (WCAG 1.4.10).
   NE JAMAIS toucher .cfg__produit { transform } : configurateur.js
   y pose --z pour garder jardin et composteur comparables.
   ============================================================ */

/* ---------- LOT 1 : jetons de la page ---------- */
.page-neuve {
  --pa-hair: .6875rem;                 /* 11px, etiquettes capitales */
  --pa-tr: .18em;
  --pa-mini: .875rem;                  /* 14px, specs et legendes */
  --pa-body: 1rem;
  --pa-lead: clamp(1.02rem, 1.3vw, 1.1875rem);
  --pa-t3: clamp(1.2rem, 2vw, 1.55rem);
  --pa-t2: clamp(1.75rem, 3.6vw, 2.6rem);
  --pa-t1: clamp(2.2rem, 5vw, 3.6rem);
  --pa-num: clamp(2.1rem, 4.2vw, 3.25rem);
  --pa-r: 4px;                         /* seul rayon des medias */
  --pa-filet: 1px solid var(--color-line);
  --pa-ease: cubic-bezier(.22, .61, .36, 1);
  /* du bord de la fenetre au bord du texte : sert a tous les debords */
  --pa-gout: max(var(--pad), calc(50vw - var(--container) / 2 + var(--pad)));
}

/* ---------- LOT 2 : rythme des fonds, sept bascules -> deux ---------- */
.page-neuve .rp-section--soft  { background: #fff; }
.page-neuve .pv--bandeau       { background: var(--color-bg); border-block: var(--pa-filet); }
.page-neuve .cfg               { background: var(--color-bg); }
.page-neuve .qs-section        { background: var(--color-bg); }
.page-neuve .qs                { background: var(--color-bg-soft); }
.page-neuve .service-cta-final { background: var(--color-bg-soft); border-top: var(--pa-filet); }

/* ---------- LOT 3 : echelle typographique ---------- */
.page-neuve h1, .page-neuve h2, .page-neuve h3 { text-wrap: balance; }
.page-neuve h2, .page-neuve h3 { font-weight: 500; letter-spacing: -.02em; }
.page-neuve .section-header__title,
.page-neuve .service-cta-final__title,
.page-neuve .mip__t { font-size: var(--pa-t2); font-weight: 500; line-height: 1.08;
  letter-spacing: -.03em; margin: 0; }
.page-neuve .rf-frow__t,
.page-neuve .docs__t,
.page-neuve .pv--bandeau .pv__titre { font-size: var(--pa-t3); font-weight: 500;
  line-height: 1.2; letter-spacing: -.015em; }
.page-neuve .section-header__subtitle,
.page-neuve .service-cta-final__lead,
.page-neuve .mip__d { font-size: var(--pa-lead); line-height: 1.6; font-weight: 400; }
/* une seule micro-etiquette pour toute la page */
.page-neuve .rf-frow__kick,
.page-neuve .gal__k,
.page-neuve .docs__k,
.page-neuve .mip__k,
.page-neuve .mip__fk,
.page-neuve .cfg__legende,
.page-neuve .rp-adv__ic { font-size: var(--pa-hair); font-weight: 600;
  letter-spacing: var(--pa-tr); text-transform: uppercase; }
.page-neuve .pv__v,
.page-neuve .cfg__recap dd,
.page-neuve .docs__pts span { font-variant-numeric: tabular-nums; }

/* ---------- LOT 4 : le heros, texte assis au bas de l'image ---------- */
/* Hauteur inchangee : le raccourci sert a faire apparaitre le bandeau
   de chiffres dans le premier ecran. */
.page-neuve .page-service__hero--cinema {
  align-items: flex-end;      /* axe vertical au-dessus de 900px */
  justify-content: flex-end;  /* axe vertical en dessous de 900px */
}
.page-neuve .page-service__hero--cinema > .container {
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.page-neuve .page-service__hero__inner { max-width: 62rem; }
.page-neuve .page-service__hero__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%; display: block;
}
.page-neuve .page-service__hero__media::after {
  background:
    linear-gradient(180deg, rgba(46,36,25,.30) 0%, rgba(46,36,25,.14) 18%,
      rgba(46,36,25,.55) 38%, rgba(46,36,25,.82) 60%, rgba(46,36,25,.92) 100%),
    linear-gradient(90deg, rgba(46,36,25,.34) 0%, rgba(46,36,25,.10) 62%, rgba(46,36,25,0) 100%);
}
.page-neuve .page-service__hero__title {
  font-size: var(--pa-t1); font-weight: 600; line-height: 1.02; letter-spacing: -.03em;
  margin: 0 0 1rem; max-width: 18ch; color: #fff;
  text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.page-neuve .page-service__hero__title .ho { color: var(--jaune); font-weight: 600; }
.page-neuve .page-service__hero__subtitle {
  font-size: var(--pa-lead); font-weight: 400; line-height: 1.55; max-width: 48ch; margin: 0;
  color: rgba(255,255,255,.90); text-shadow: 0 1px 16px rgba(0,0,0,.4); }
.page-neuve .page-service__hero__subtitle strong { color: #fff; font-weight: 600; }

/* ---------- LOT 5 : les trois puces deviennent une ligne de specs ---------- */
.page-neuve .page-service__hero__bullets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  max-width: 56rem; padding: 0; list-style: none;
  margin: clamp(1.5rem, 3.2vh, 2.2rem) 0 clamp(1.3rem, 2.8vh, 1.9rem);
  border-top: 1px solid rgba(253,251,244,.30); }
.page-neuve .page-service__hero__bullets li {
  display: block; padding: .95rem 1.3rem 0 0;
  font-size: var(--pa-mini); font-weight: 400; line-height: 1.45;
  color: rgba(253,251,244,.88); text-shadow: none; }
.page-neuve .page-service__hero__bullets li + li {
  border-left: 1px solid rgba(253,251,244,.30); padding-left: 1.3rem; }
.page-neuve .page-service__hero__bullets li strong { color: #fff; font-weight: 600; }
.page-neuve .page-service__hero__bullets svg { display: none; }

/* ---------- LOT 6 : les boutons cessent de leviter ---------- */
.page-neuve .btn { box-shadow: none; font-weight: 600; letter-spacing: .015em;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.page-neuve .btn:hover { transform: none; box-shadow: none; }
.page-neuve .btn--primary { box-shadow: none; }
.page-neuve .btn--primary:hover { transform: none; }
.page-neuve .btn--lg { padding: .85em 1.9em; font-size: .9375rem;
  min-width: clamp(180px, 22vw, 240px); justify-content: center; }
.page-neuve .btn .arrow { transition: transform .2s ease; }
.page-neuve .btn:hover .arrow { transform: translateX(3px); }

/* ---------- LOT 7 : trois chiffres nus ---------- */
.page-neuve .pv--bandeau { padding: clamp(1.6rem, 3.2vw, 2.4rem) 0; }
.page-neuve .pv--bandeau .pv__entete { flex: 0 1 20rem; max-width: 20rem; margin: 0; }
.page-neuve .pv--bandeau .pv__titre { margin: .6rem 0 0; max-width: 22ch; color: var(--color-ink); }
.page-neuve .pv--bandeau .pv__titre .ho { color: var(--color-muted); }
.page-neuve .pv--bandeau .pv__ruban { max-width: none; margin-inline: 0; padding-inline: 0; gap: 0; }
.page-neuve .pv--bandeau .pv__c {
  min-width: 0; width: auto; background: none; color: var(--color-ink);
  border-radius: 0; box-shadow: none;
  padding: 0 clamp(1rem, 2.4vw, 2rem); border-left: var(--pa-filet); }
.page-neuve .pv--bandeau .pv__c:first-child { border-left: 0; padding-left: 0; }
.page-neuve .pv--bandeau .pv__c::before { display: none; }
.page-neuve .pv--bandeau .pv__n { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .4rem; }
.page-neuve .pv--bandeau .pv__v { font-size: var(--pa-num); font-weight: 500;
  line-height: .9; letter-spacing: -.045em; color: var(--color-ink); }
.page-neuve .pv--bandeau .pv__u { font-size: .95rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--acc-deep); }
.page-neuve .pv--bandeau .pv__l { display: block; margin: 0; max-width: 24ch;
  font-size: var(--pa-mini); font-weight: 400; line-height: 1.45; color: var(--color-muted); }

/* ---------- LOT 8 : en-tetes a gauche, le jaune passe en filet ---------- */
.page-neuve .section-header { text-align: left; max-width: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem); }
.page-neuve .section-header__title { max-width: 22ch; }
.page-neuve .section-header__title .accent { color: var(--acc-deep); font-weight: 600; }
.page-neuve .section-header__subtitle { max-width: 60ch;
  margin: clamp(.9rem, 1.8vw, 1.3rem) 0 0; color: var(--color-muted); }
.page-neuve .section-header__overline {
  display: inline-flex; align-items: center; gap: .75rem;
  background: none; padding: 0; border-radius: 0; margin: 0 0 1rem;
  font-size: var(--pa-hair); font-weight: 600; letter-spacing: var(--pa-tr);
  text-transform: uppercase; color: var(--acc-deep); }
.page-neuve .section-header__overline::before {
  content: ""; flex: none; width: 28px; height: 2px; background: var(--jaune); }
.page-neuve .section-header__overline--light { background: none; color: var(--jaune); }
.page-neuve .section-header__overline--light::before { background: rgba(233,217,133,.55); }
.page-neuve .bloc-sombre .section-header__title .accent { color: var(--jaune); }
.page-neuve .bloc-sombre .section-header__subtitle { color: #D9DCC6; }

/* ---------- LOT 9 : les rangees illustrees ---------- */
.page-neuve .rf-frow { gap: clamp(2rem, 4.5vw, 4rem); align-items: center; margin-bottom: 0; }
.page-neuve .rf-frow__media { border-radius: var(--pa-r); }
.page-neuve .rf-frow__video { border-radius: 0; box-shadow: none; background: var(--color-ink); }
.page-neuve .rf-frow__media--picto { background: #fff; border: var(--pa-filet); border-radius: var(--pa-r); }
.page-neuve .rf-frow__kick { display: block; margin: 0 0 1rem; color: var(--acc-deep); }
.page-neuve .rf-frow__t { max-width: 22ch; margin: 0 0 .9rem; color: var(--color-ink); }
.page-neuve .rf-frow__d { font-size: var(--pa-body); line-height: 1.68; color: var(--color-muted);
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.75rem); max-width: 52ch; }
/* la puce jaune cerclee de brun devient un filet ; le <strong> reste en ligne */
.page-neuve .rf-frow__li { display: block; gap: 0; max-width: 52ch; }
.page-neuve .rf-frow__li li { position: relative; padding: .5rem 0 0 0; margin-top: .5rem;
  border-top: var(--pa-filet); font-size: var(--pa-mini); line-height: 1.55; color: var(--color-muted); }
.page-neuve .rf-frow__li li:first-child { margin-top: 0; }
.page-neuve .rf-frow__li li::before { display: none; }
.page-neuve .rf-frow__li li strong { color: var(--color-ink); font-weight: 600; }

/* ---------- LOT 10 : sept cartes disparaissent ---------- */
.page-neuve .rp-advgrid { gap: clamp(1.4rem, 3vw, 2.4rem); }
.page-neuve #brassage .rp-advgrid { margin-top: clamp(2rem, 4vw, 3rem); }
.page-neuve .rp-adv { background: none; border: 0; border-top: 2px solid var(--color-ink);
  border-radius: 0; box-shadow: none; padding: 1.15rem 0 0; }
.page-neuve .rp-adv__ic { display: block; width: auto; height: auto; background: none;
  border-radius: 0; padding: 0; margin: 0 0 .75rem;
  color: var(--color-muted); font-variant-numeric: tabular-nums; }
.page-neuve .rp-adv h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em;
  line-height: 1.25; margin: 0 0 .4rem; color: var(--color-ink); }
.page-neuve .rp-adv p { font-size: var(--pa-mini); line-height: 1.6; color: var(--color-muted); margin: 0; }
.page-neuve .bloc-sombre .rp-adv { background: none; border: 0;
  border-top: 2px solid rgba(253,251,244,.45); }
.page-neuve .bloc-sombre .rp-adv__ic { background: none; color: var(--jaune); }
.page-neuve .bloc-sombre .rp-adv h3 { color: #fff; }
.page-neuve .bloc-sombre .rp-adv p { color: rgba(253,251,244,.78); }

/* ---------- LOT 11 : la construction ---------- */
.page-neuve #construction .construction__duo { align-items: center; }
.page-neuve #construction .construction__visuel { display: block; margin: 0; }
.page-neuve #construction .construction__visuel img { width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--pa-r); box-shadow: none; }
.page-neuve #construction .construction__duo .rp-advgrid { height: auto; grid-auto-rows: auto;
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem); }

/* ---------- LOT 12 : le configurateur ---------- */
.page-neuve .cfg__scene { background: var(--color-bg-soft); border: 0; border-radius: var(--pa-r);
  height: clamp(340px, 42vw, 500px); padding: 4%; }
.page-neuve .cfg__produit { filter: drop-shadow(0 22px 30px rgba(46,36,25,.18)); }
.page-neuve .cfg__legende { display: block; width: 100%; color: var(--acc-deep);
  margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: var(--pa-filet); }
.page-neuve .cfg__teintes { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 1.25rem .75rem; }
.page-neuve .cfg__teinte { flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: 0; border-radius: 0; padding: 0;
  font-size: var(--pa-mini); font-weight: 400; text-align: center;
  color: var(--color-ink); transition: color .2s ease; }
.page-neuve .cfg__teinte:hover:not(:disabled) { background: none; }
.page-neuve .cfg__teinte.est-actif { background: none; font-weight: 600; }
.page-neuve .cfg__pastille { width: 46px; height: 46px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(46,36,25,.22); transition: box-shadow .2s var(--pa-ease); }
/* deux canaux d'etat : l'anneau et la graisse, jamais la couleur seule */
.page-neuve .cfg__teinte.est-actif .cfg__pastille {
  box-shadow: inset 0 0 0 1px rgba(46,36,25,.22), 0 0 0 3px var(--color-bg), 0 0 0 5px var(--cta); }
.page-neuve .cfg__teinte:focus-visible { outline: 2px solid var(--cta); outline-offset: 5px; }
/* on desature la pastille, pas le libelle : opacity .4 le mettait sous 2,5:1 */
.page-neuve .cfg__teinte:disabled { opacity: 1; color: var(--color-muted); cursor: not-allowed; }
.page-neuve .cfg__teinte:disabled .cfg__pastille { opacity: .3; }
.page-neuve .cfg__recap { background: none; border-radius: 0; padding: 0;
  margin-top: 1.4rem; border-top: var(--pa-filet); }
.page-neuve .cfg__recap > div { padding: .75rem 0; border-bottom: var(--pa-filet); }
.page-neuve .cfg__recap > div + div { border-top: 0; }
.page-neuve .cfg__recap dd { font-weight: 500; }
.page-neuve .cfg__devis { margin-top: 1.4rem; }

/* ---------- LOT 13 : la galerie en mur plein cadre ---------- */
/* clip et non hidden : hidden casserait la barre d'ancres collante */
.page-neuve #galerie { overflow-x: clip; }
.page-neuve .gal { width: auto; margin: clamp(2rem, 4vw, 3rem) calc(-1 * var(--pa-gout)) 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 8px; row-gap: clamp(1.25rem, 2vw, 1.5rem); }
.page-neuve .gal__i { margin: 0; background: none; border: 0; border-radius: 0; overflow: hidden; }
.page-neuve .gal__i img { border-radius: 0; aspect-ratio: 4 / 3; transition: opacity .35s ease; }
.page-neuve .gal__i:hover img { transform: none; opacity: .86; }
.page-neuve .gal__i figcaption { padding: .55rem .5rem 0; gap: .12rem; }
.page-neuve .gal__k { color: var(--acc-deep); }
.page-neuve .gal__l { font-size: var(--pa-mini); color: var(--color-ink); line-height: 1.35; }

/* ---------- LOT 14 : l'atelier ---------- */
.page-neuve .mip__tete { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.page-neuve .mip__k { display: block; color: var(--jaune); margin-bottom: 1rem; }
.page-neuve .mip__t { max-width: 20ch; margin: 0 0 1.1rem; }
.page-neuve .mip__d { max-width: 56ch; color: rgba(253,251,244,.84); }
.page-neuve .mip__mos { margin-inline: calc(-1 * var(--pa-gout)); gap: 4px; }
.page-neuve .mip__f { border-radius: 0; }
.page-neuve .mip__f figcaption { padding: 3rem 1rem .95rem;
  background: linear-gradient(180deg, rgba(28,22,15,0) 0%, rgba(28,22,15,.58) 30%,
    rgba(28,22,15,.92) 62%, rgba(28,22,15,.97) 100%); }
.page-neuve .mip__fk { color: var(--jaune); }
.page-neuve .mip__fl { font-size: var(--pa-mini); color: rgba(255,255,255,.92); }
.page-neuve .mip__args li { border-top-color: rgba(253,251,244,.30); padding-top: 1rem;
  font-size: var(--pa-mini); color: rgba(253,251,244,.80); }
.page-neuve .mip__args strong { font-weight: 500; margin-bottom: .22rem; }

/* ---------- LOT 15 : les documents, la carte disparait ---------- */
/* l'ombre reste sur l'apercu seul : sur une feuille de papier, ce n'est
   pas une decoration, c'est ce qui la fait lire comme un objet. */
.page-neuve .docs { gap: clamp(1.8rem, 4vw, 3.2rem); }
.page-neuve .docs__lien { background: none; border: 0; border-top: 2px solid var(--color-ink);
  border-radius: 0; padding: clamp(1.3rem, 2.4vw, 1.9rem) 0 0;
  gap: clamp(1.2rem, 2.6vw, 2rem); transition: border-color .25s ease; }
.page-neuve .docs__lien:hover { transform: none; box-shadow: none; border-top-color: var(--color-ink); }
.page-neuve .docs__lien:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; }
.page-neuve .docs__vue { border: 0; border-radius: 2px;
  box-shadow: 0 16px 32px -18px rgba(46,36,25,.5);
  transition: transform .35s var(--pa-ease), box-shadow .35s ease; }
.page-neuve .docs__lien:hover .docs__vue { transform: translateY(-5px);
  box-shadow: 0 26px 46px -18px rgba(46,36,25,.55); }
.page-neuve .docs__k { color: var(--acc-deep); }
.page-neuve .docs__t { margin: .45rem 0 .6rem; color: var(--color-ink); }
.page-neuve .docs__d { font-size: var(--pa-mini); line-height: 1.6; color: var(--color-muted); max-width: 46ch; }
.page-neuve .docs__pts { display: block; gap: 0; margin: 1.2rem 0 1.5rem; border-top: var(--pa-filet); }
.page-neuve .docs__pts span { display: block; padding: .62rem 0; padding-left: 0;
  border-bottom: var(--pa-filet); font-size: var(--pa-mini); line-height: 1.45; color: var(--color-muted); }
.page-neuve .docs__pts span::before { display: none; }
.page-neuve .docs__dl { padding: .72rem 1.25rem; font-weight: 600; }
.page-neuve .docs__meta { color: rgba(233,217,133,.82); letter-spacing: .02em; text-transform: none; }

/* ---------- LOT 16 : l'appel final ---------- */
.page-neuve .service-cta-final { padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; }
.page-neuve .service-cta-final__inner { max-width: 46rem; margin-inline: auto; }
.page-neuve .service-cta-final__title { color: var(--color-ink); }
.page-neuve .service-cta-final__lead { max-width: 52ch; margin: 1.1rem auto 0; color: var(--color-muted); }
.page-neuve .service-cta-final__ctas { gap: .8rem; margin-top: clamp(1.8rem, 3.6vw, 2.6rem); }
.page-neuve .service-cta-final .btn--ghost,
.page-neuve .service-cta-final .btn--outline-w { background: transparent;
  color: var(--color-ink); border-color: var(--color-ink); }
.page-neuve .service-cta-final .btn--ghost:hover,
.page-neuve .service-cta-final .btn--outline-w:hover { background: var(--color-ink);
  color: var(--color-bg); border-color: var(--color-ink); }

/* ---------- LOT 17 : la barre d'ancres en onglets ---------- */
.page-neuve .ancres { background: rgba(253,251,244,.95); border-top: 0; border-bottom: var(--pa-filet); }
.page-neuve .ancres__in { gap: 0; padding-block: 0; }
.page-neuve .ancres__l { padding: .95rem .95rem; border: 0; border-radius: 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; color: var(--color-muted);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .2s ease, box-shadow .2s ease; }
.page-neuve .ancres__l:first-child { padding-left: 0; }
.page-neuve .ancres__l:hover { background: none; color: var(--color-ink); }
.page-neuve .ancres__l.est-actif { background: none; color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--cta); }
.page-neuve .ancres__l:focus-visible { outline: 2px solid var(--cta); outline-offset: -4px; }

/* ---------- LOT 18 : mouvement ---------- */
.js .page-neuve .reveal { transform: translateY(14px);
  transition: opacity .55s var(--pa-ease), transform .55s var(--pa-ease);
  transition-delay: calc(var(--i, 0) * 50ms); }
.js .page-neuve .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .page-neuve .gal__i:hover img { opacity: 1; }
  .page-neuve .docs__lien:hover .docs__vue { transform: none;
    box-shadow: 0 16px 32px -18px rgba(46,36,25,.5); }
  .page-neuve .btn:hover .arrow { transform: none; }
  .page-neuve .cfg__pastille, .page-neuve .gal__i img,
  .page-neuve .docs__vue, .page-neuve .ancres__l { transition: none; }
  .page-neuve #brassage .rf-frow__media {
    background: #2E2419 url('../videos/posters/brassage-hero-poster.jpg') 50% 0 / cover no-repeat; }
  .page-neuve #brassage .rf-frow__media video { display: none; }
}

/* ---------- LOT 19 : replis (ecrits en dernier : une media query
     n'ajoute aucune specificite, tout repli ecrase est reecrit ici) ---------- */
@media (max-width: 1100px) {
  .page-neuve .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-neuve .page-service__hero__media::after {
    background: linear-gradient(180deg, rgba(46,36,25,.55) 0%, rgba(46,36,25,.62) 20%,
      rgba(46,36,25,.82) 45%, rgba(46,36,25,.95) 100%); }
  .page-neuve .page-service__hero--cinema > .container { padding-top: 3rem; padding-bottom: 2.25rem; }
  .page-neuve .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-neuve .pv--bandeau .pv__entete { flex: none; max-width: none; }
  .page-neuve .pv--bandeau .pv__c { padding: 0 clamp(.6rem, 2vw, 1.2rem); }
  .page-neuve .rp-advgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-neuve #construction .construction__visuel { max-width: 420px; margin-inline: auto; }
  .page-neuve .docs { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .page-neuve .rf-frow { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 640px) {
  .page-neuve .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
}
@media (max-width: 560px) {
  .page-neuve { --pa-t1: clamp(2rem, 9.5vw, 2.75rem); --pa-t2: clamp(1.6rem, 7.5vw, 2.1rem); }
  .page-neuve .page-service__hero__bullets { grid-template-columns: 1fr; }
  .page-neuve .page-service__hero__bullets li { padding-right: 0; }
  .page-neuve .page-service__hero__bullets li + li { border-left: 0;
    border-top: 1px solid rgba(253,251,244,.30); padding-left: 0; padding-top: .85rem; }
  .page-neuve .page-service__hero .btn--lg,
  .page-neuve .service-cta-final .btn--lg { min-width: 0; width: 100%; }
  .page-neuve .pv--bandeau .pv__ruban { grid-template-columns: 1fr; }
  .page-neuve .pv--bandeau .pv__c { border-left: 0; padding: 0; }
  .page-neuve .pv--bandeau .pv__c + .pv__c { margin-top: 1.4rem; padding-top: 1.4rem;
    border-top: var(--pa-filet); }
  .page-neuve .rp-advgrid { grid-template-columns: 1fr; }
  .page-neuve .rp-adv { padding-top: 1rem; }
}
@media (max-width: 480px) {
  .page-neuve .docs__lien { grid-template-columns: 1fr; }
  .page-neuve .docs__vue { max-width: 180px; }
}
/* recalage du cadrage : le composteur doit rester entier au-dessus du texte */
.page-neuve .page-service__hero__media > img { object-position: 50% 62%; }

/* ---------- Accueil : les blocs a tete propre suivent le meme langage ---------- */
/* Trois blocs de l'accueil n'utilisent pas .section-header. Sans ces
   regles ils resteraient centres, avec un aplat jaune et une echelle
   typographique differente : l'axe de lecture de la page se briserait. */
.page-neuve .mz__tete { text-align: left; max-width: none; }
.page-neuve .mz__titre,
.page-neuve .gr__titre,
.page-neuve .bp__titre { font-size: var(--pa-t2); font-weight: 500;
  line-height: 1.08; letter-spacing: -.03em; max-width: 22ch; }
.page-neuve .mz__titre .ho,
.page-neuve .gr__titre .ho { color: var(--acc-deep); font-weight: 600; }
.page-neuve .mz__sous,
.page-neuve .gr__sous { font-size: var(--pa-lead); line-height: 1.6;
  max-width: 60ch; margin-left: 0; margin-right: 0; color: var(--color-muted); }
.page-neuve .gr__in { text-align: left; }

/* le surtitre de l'estimation porte sa propre classe : meme traitement */
.page-neuve .pricing-leadgen__content__overline {
  display: inline-flex; align-items: center; gap: .75rem;
  background: none; padding: 0; border-radius: 0; margin: 0 0 1rem;
  font-size: var(--pa-hair); font-weight: 600; letter-spacing: var(--pa-tr);
  text-transform: uppercase; color: var(--acc-deep); }
.page-neuve .pricing-leadgen__content__overline::before {
  content: ""; flex: none; width: 28px; height: 2px; background: var(--jaune); }
.page-neuve .pricing-leadgen__content__title { font-size: var(--pa-t3); font-weight: 500;
  line-height: 1.2; letter-spacing: -.015em; }
/* le 52 barre portait un brun clair a 2,49:1 : il porte une information
   (l'ancienne frequence), il doit rester lisible. La barre jaune et la
   taille suffisent a le poser comme secondaire. */
.page-neuve .bf__v52 { color: var(--color-muted); }

/* ============================================================
   RECHAUFFEMENT — la meme rigueur, mais chaleureuse.
   ------------------------------------------------------------
   L'epuration precedente etait juste sur la structure (filets au
   lieu de puces, chiffres nus, axe de lecture a gauche) et fausse
   sur la matiere : blanc pur, filets noirs, angles vifs, voile
   opaque. Un composteur en douglas fabrique a la main n'est pas
   une berline electrique.

   On garde tout le squelette. On change quatre choses :
   le blanc redevient creme, les filets noirs redeviennent bruns,
   les angles s'adoucissent, et la photo respire sous le voile.
   ============================================================ */

.page-neuve { --pa-r: 12px; }

/* --- 1. Plus de blanc pur : creme et sable alternes --- */
.page-neuve .rp-section--soft { background: var(--color-bg-soft); }
.page-neuve .rp-section { background: var(--color-bg); }
.page-neuve .cfg,
.page-neuve .qs-section { background: var(--color-bg); }
.page-neuve .service-cta-final { background: var(--color-bg-soft); }

/* --- 2. Les filets noirs redeviennent bruns --- */
/* Le noir pur ne figure nulle part dans la charte : il durcit tout
   ce qu'il souligne. Le brun moyen tient la meme fonction. */
.page-neuve .rp-adv { border-top: 2px solid var(--brun); }
.page-neuve .rp-adv__ic { color: var(--acc-deep); }
.page-neuve .docs__lien { border-top: 2px solid var(--brun); }
.page-neuve .docs__lien:hover { border-top-color: var(--acc-deep); }
.page-neuve .bloc-sombre .rp-adv { border-top-color: rgba(233,217,133,.5); }
/* l'onglet actif se souligne en brun, pas en encre */
.page-neuve .ancres__l.est-actif { box-shadow: inset 0 -2px 0 var(--acc-deep); }

/* --- 3. Les angles s'adoucissent, les ombres se rechauffent --- */
.page-neuve .rf-frow__media,
.page-neuve .cfg__scene { border-radius: var(--pa-r);
  box-shadow: 0 18px 44px -30px rgba(46,36,25,.45); }
.page-neuve .rf-frow__video { border-radius: var(--pa-r); }
.page-neuve .gal__i { border-radius: 8px; }
.page-neuve .gal__i img { border-radius: 8px; }
.page-neuve .gal { column-gap: 12px; }
.page-neuve .mip__f { border-radius: 10px; }
.page-neuve .mip__mos { gap: 10px; }
.page-neuve #construction .construction__visuel img { border-radius: var(--pa-r); }

/* --- 4. La photo du heros respire : le voile s'allege d'un tiers --- */
.page-neuve .page-service__hero__media::after {
  background:
    linear-gradient(180deg, rgba(46,36,25,.20) 0%, rgba(46,36,25,.08) 20%,
      rgba(46,36,25,.44) 44%, rgba(46,36,25,.74) 68%, rgba(46,36,25,.86) 100%),
    linear-gradient(90deg, rgba(46,36,25,.30) 0%, rgba(46,36,25,.08) 62%, rgba(46,36,25,0) 100%); }

/* --- 5. Les titres reprennent du corps --- */
/* La graisse 500 avec -.03em faisait technique ; 600 et -.02em
   donnent la meme nettete avec de la presence. */
.page-neuve h2, .page-neuve h3 { font-weight: 600; letter-spacing: -.018em; }
.page-neuve .section-header__title,
.page-neuve .service-cta-final__title,
.page-neuve .mip__t,
.page-neuve .mz__titre,
.page-neuve .gr__titre { font-weight: 600; letter-spacing: -.022em; line-height: 1.12; }
.page-neuve .rf-frow__t,
.page-neuve .docs__t,
.page-neuve .pv--bandeau .pv__titre { font-weight: 600; letter-spacing: -.01em; }
.page-neuve .pv--bandeau .pv__v { font-weight: 600; letter-spacing: -.035em; }

/* --- 6. Le prefixe des chiffres redevient lisible --- */
/* « A partir de » etait en jaune sable sur creme : 1,38:1. */
.page-neuve .pv__k { color: var(--acc-deep); }
/* .rp-section et .rp-section--soft ont la meme specificite : la seconde
   doit etre ecrite apres, sinon l'alternance creme/sable disparait. */
.page-neuve .rp-section--soft { background: var(--color-bg-soft); }
/* galerie, documents et appel final se suivaient en sable : on relance
   l'alternance au milieu pour que les trois derniers blocs respirent. */
.page-neuve #documents { background: var(--color-bg); }
/* Voile recalibre apres mesure au pixel : allege, le titre tombait a
   2,07:1 sur les zones claires de la photo (seuil 3 en grand texte).
   On renforce du cote du texte plutot que partout : le sujet, a droite,
   garde sa lumiere. */
.page-neuve .page-service__hero__media::after {
  background:
    linear-gradient(180deg, rgba(46,36,25,.24) 0%, rgba(46,36,25,.16) 22%,
      rgba(46,36,25,.46) 46%, rgba(46,36,25,.74) 68%, rgba(46,36,25,.86) 100%),
    linear-gradient(90deg, rgba(46,36,25,.46) 0%, rgba(46,36,25,.12) 58%, rgba(46,36,25,0) 100%); }
/* deuxieme passe : 2,34:1 au pire pixel du titre, il faut encore
   assombrir la bande ou il court, sans toucher au bas de l'image. */
.page-neuve .page-service__hero__media::after {
  background:
    linear-gradient(180deg, rgba(46,36,25,.30) 0%, rgba(46,36,25,.28) 22%,
      rgba(46,36,25,.56) 46%, rgba(46,36,25,.76) 68%, rgba(46,36,25,.86) 100%),
    linear-gradient(90deg, rgba(46,36,25,.50) 0%, rgba(46,36,25,.14) 58%, rgba(46,36,25,0) 100%); }
/* troisieme et derniere passe : 2,65:1 au pire pixel, il manque peu.
   On assombrit uniquement la bande haute ou court le titre. */
.page-neuve .page-service__hero__media::after {
  background:
    linear-gradient(180deg, rgba(46,36,25,.38) 0%, rgba(46,36,25,.38) 22%,
      rgba(46,36,25,.64) 46%, rgba(46,36,25,.78) 68%, rgba(46,36,25,.87) 100%),
    linear-gradient(90deg, rgba(46,36,25,.52) 0%, rgba(46,36,25,.16) 58%, rgba(46,36,25,0) 100%); }


/* L'etude de cas : le titre etait en blanc avec ombre portee, herite
   d'une version ou il etait pose sur la photo. Il est aujourd'hui sur
   l'aplat jaune clair, soit 1,18:1 — illisible. */
.page-neuve .cs__titre { color: var(--color-ink); text-shadow: none; }
.page-neuve .cs__titre .ho { color: var(--acc-deep); }
/* Sous 900px le bandeau de chiffres restait en rangee : le titre se
   retrouvait comprime sur trois lignes de dix caracteres. */
@media (max-width: 900px) {
  .page-neuve .pv--bandeau .pv__in { display: block; }
  .page-neuve .pv--bandeau .pv__entete { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
  .page-neuve .pv--bandeau .pv__ruban { width: 100%; }
}
/* la mascotte gagne un peu de presence */
.peazy img { width: clamp(96px, 13vw, 150px); }
.peazy--grand img { width: clamp(140px, 18vw, 220px); }

/* ============================================================
   Le langage « page neuve » ci-dessus est DESACTIVE : la classe a
   ete retiree des <body>. Le site revient au style commun aux
   quatre marques (easy to clean, easy to carry, easy to change).
   Le bloc reste en place, inerte : le reactiver ne demande que de
   remettre class="page-neuve" sur un <body>.

   Les trois corrections ci-dessous en sont extraites : ce sont des
   defauts de lisibilite reels, mesures, qui existaient avant la
   refonte et qui doivent tenir quel que soit le style retenu.
   ============================================================ */

/* « A partir de », en jaune sable sur creme : 1,38:1. */
.pv__k { color: var(--acc-deep); }


/* Le 52 barre de la frequence de collecte portait un brun clair a
   2,49:1 alors qu'il porte une information. La barre jaune et la
   taille suffisent a le poser comme secondaire. */
.bf__v52 { color: var(--color-muted); }

/* ============================================================
   PEAZY — la mascotte, en situation.
   ------------------------------------------------------------
   Une seule pose existe (l'affiche de sensibilisation). Ce qui
   change d'une apparition a l'autre, c'est la mise en scene et
   le propos : chaque bulle apporte un fait, jamais un commentaire
   en l'air, sinon on ne comprend pas qui parle ni pourquoi.

   Il est pose, pas flottant : une ombre au sol, son nom sous lui
   a la premiere rencontre, et une bulle a pointe qui designe qui
   prend la parole.
   ============================================================ */
.peazy { display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(.9rem, 2vw, 1.6rem); margin-top: clamp(2rem, 4vw, 3rem); }

.peazy__lui { position: relative; flex: none; display: flex; flex-direction: column;
  align-items: center; gap: .35rem; }
.peazy__lui img { display: block; width: clamp(104px, 13vw, 158px); height: auto; position: relative; z-index: 1; }
/* l'ombre au sol : c'est elle qui le pose */
.peazy__lui::after { content: ''; position: absolute; left: 50%; bottom: 1.35rem; transform: translateX(-50%);
  width: 72%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(46,36,25,.30) 0%, rgba(46,36,25,0) 72%); }
.peazy__nom { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); }

.peazy--grand .peazy__lui img { width: clamp(150px, 19vw, 240px); }
.peazy--mini .peazy__lui img { width: clamp(86px, 10vw, 118px); }

/* la bulle : arrondie, avec une pointe qui vise la mascotte */
.peazy__dit { position: relative; max-width: 34ch; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  padding: .95rem 1.25rem; border-radius: 18px;
  background: var(--color-bg); border: 1px solid var(--color-line);
  font-size: .95rem; line-height: 1.5; color: var(--color-ink);
  box-shadow: 0 12px 30px -20px rgba(46,36,25,.55); }
.peazy__dit::before, .peazy__dit::after { content: ''; position: absolute; right: -9px; bottom: 14px;
  width: 0; height: 0; border-style: solid; }
.peazy__dit::before { border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent var(--color-line); }
.peazy__dit::after { right: -7px; border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--color-bg); }

/* sur les fonds sombres, la bulle et le nom s'inversent */
.bloc-sombre .peazy__dit, .mip .peazy__dit, .manifesto .peazy__dit {
  background: rgba(253,251,244,.12); border-color: rgba(253,251,244,.3); color: #fff; }
.bloc-sombre .peazy__dit::before, .mip .peazy__dit::before, .manifesto .peazy__dit::before {
  border-left-color: rgba(253,251,244,.3); }
.bloc-sombre .peazy__dit::after, .mip .peazy__dit::after, .manifesto .peazy__dit::after {
  border-left-color: rgba(69,58,45,1); }
.bloc-sombre .peazy__nom, .mip .peazy__nom, .manifesto .peazy__nom { color: rgba(253,251,244,.7); }
.bloc-sombre .peazy__lui::after, .mip .peazy__lui::after, .manifesto .peazy__lui::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 72%); }

@media (max-width: 640px) {
  .peazy { gap: .7rem; }
  .peazy__dit { max-width: 24ch; font-size: .88rem; padding: .8rem 1rem; }
}
/* il entre en se posant : une descente courte, jamais de rebond */
@media (prefers-reduced-motion: no-preference) {
  .js .peazy.reveal { transform: translateY(18px); }
  .js .peazy.reveal.is-in { transform: none; }
}
/* certaines sections hotes sont elles-memes en flex (le bandeau de
   chiffres) : sans cela la mascotte devient une colonne et comprime
   le contenu a cote d'elle. */
.peazy__hote { flex: 1 0 100%; width: 100%; }
/* la section hote doit autoriser le retour a la ligne, sinon l'element
   a 100 % reste sur la rangee et deborde a droite. */
.pv--bandeau { flex-wrap: wrap; }
/* Etude de cas : le titre est bien pose sur la photo, en blanc. Mais la
   photo est en chargement differe, et tant qu'elle n'est pas la le
   titre se retrouve sur l'aplat jaune clair, illisible. On donne donc
   a la scene un fond sombre d'attente. */
.cs__scene { background: var(--color-brand-dark); }

/* ============================================================
   Ce que l'on loue : deux materiels cote a cote.
   La location porte sur la machine ; le jardin composteur est la
   meme colonne habillee d'un massif, et se loue au meme titre.
   ============================================================ */
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
.loc__c { margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.loc__vue { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-soft); }
.loc__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc__txt { display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.2rem, 2.4vw, 1.8rem); }
.loc__k { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-brand-primary); }
.loc__t { margin: .35rem 0 .6rem; font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.25; }
.loc__d { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.6; color: var(--color-muted); }
.loc__li { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem; }
.loc__li li { position: relative; padding-left: 1.2rem; font-size: .92rem; line-height: 1.45;
  color: var(--color-muted); }
.loc__li li::before { content: ''; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); }
.loc__li strong { color: var(--color-ink); font-weight: 600; }
.loc__go { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: .95rem;
  color: var(--cta); text-decoration: none; border-bottom: 2px solid var(--jaune); padding-bottom: .15rem; }
.loc__go:hover { border-bottom-color: var(--cta); }
@media (max-width: 820px) { .loc { grid-template-columns: 1fr; } }

/* Le menu deroulant flotte a 12 px sous son declencheur : ce vide
   faisait sortir la souris du composant et refermait le menu avant
   qu'on l'atteigne. Ce pont invisible relie les deux. */
.nav-dropdown__menu::before { content: ''; position: absolute; left: 0; right: 0;
  top: -14px; height: 14px; }
/* la zone sensible deborde legerement sous le menu, meme raison */
.nav-dropdown.is-open .nav-dropdown__menu { display: flex; }

/* Le loyer de chaque materiel, dans sa carte : les deux versions du
   composteur ne sont pas au meme prix, la page doit le dire ou on la
   lit comme un tarif unique. */
.loc__prix { display: flex; align-items: baseline; gap: .3rem; margin: 0 0 .9rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--color-line); }
.loc__prix__v { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.loc__prix__u { font-size: 1rem; font-weight: 600; color: var(--acc-deep); }
.loc__prix__l { font-size: .9rem; color: var(--color-muted); margin-left: .15rem; }

/* La barre d'ancres etait au-dessus de l'en-tete (60 contre 50) : elle
   passait donc devant les menus deroulants, qu'on ne pouvait plus lire.
   Elle reste au-dessus du contenu, mais sous l'en-tete. */
.ancres { z-index: 40; }

/* ============================================================
   Le deroule en cinq etapes : de l'air.
   Le bloc empile cinq rangees illustrees ; a 34 px d'intervalle et
   9 px entre les puces, l'ensemble se lisait comme un pave. On
   ecarte les rangees, on separe les colonnes, et on laisse respirer
   le texte a l'interieur de chacune.
   ============================================================ */
#etapes .rf-frow { gap: clamp(2rem, 4.5vw, 3.75rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem); align-items: center; }
#etapes .rf-frow:last-child { margin-bottom: 0; }
#etapes .rf-frow__kick { display: block; margin-bottom: 1.1rem; }
#etapes .rf-frow__t { margin-bottom: 1.15rem; }
#etapes .rf-frow__d { margin-bottom: 1.7rem; line-height: 1.7; }
#etapes .rf-frow__li { gap: .85rem; }
#etapes .rf-frow__li li { line-height: 1.6; }

/* ============================================================
   L'addition des deux offres.
   La formule avec collecte n'est pas une autre offre : c'est la
   location, plus l'enlevement, plus la mesure. Le bloc le dit
   comme une addition, et chaque terme renvoie a la page qui le
   detaille — c'est ce qui evite de repeter la location ici.
   ============================================================ */
.somme { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: clamp(.6rem, 1.5vw, 1.2rem); }
.somme__c { display: flex; flex-direction: column; margin: 0;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.somme__n { font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--acc-deep); margin-bottom: .5rem; }
.somme__t { margin: 0 0 .6rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.25; }
.somme__d { margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--color-muted); }

.somme__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem;
  margin: auto 0 1rem; padding-top: .9rem; border-top: 1px solid var(--color-line); }
.somme__pv { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.somme__pu { font-size: .95rem; font-weight: 600; color: var(--acc-deep); }
.somme__pl { font-size: .85rem; color: var(--color-muted); flex-basis: 100%; }

.somme__go { align-self: flex-start; font-weight: 600; font-size: .92rem; color: var(--cta);
  text-decoration: none; border-bottom: 2px solid var(--jaune); padding-bottom: .12rem; }
.somme__go:hover { border-bottom-color: var(--cta); }

/* les signes de l'addition, entre les cartes */
.somme__op { align-self: center; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700;
  color: var(--brun); line-height: 1; }

/* la ligne de total, sous l'addition */
.somme__total { display: flex; align-items: baseline; gap: clamp(.7rem, 1.6vw, 1.1rem);
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.9rem);
  background: var(--jaune-clair); border-radius: var(--radius-lg); }
.somme__eg { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; color: var(--acc-deep); line-height: 1; }
.somme__totalt { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.55; color: var(--color-ink); }
.somme__totalt strong { font-weight: 700; }

@media (max-width: 900px) {
  .somme { grid-template-columns: 1fr; }
  .somme__op { justify-self: center; padding: .2rem 0; }
}

/* ============================================================
   La passerelle vers l'autre offre.
   Sur la page location, l'option collecte n'est plus detaillee :
   elle est resumee en trois lignes et renvoie a trois endroits
   differents de la page collecte. C'est ce qui evite d'ecrire
   deux fois la meme chose sur deux pages.
   ============================================================ */
.pass { display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.pass__k { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acc-deep); margin-bottom: .7rem; }
.pass__t { margin: 0 0 .9rem; font-size: clamp(1.4rem, 2.9vw, 2rem); line-height: 1.18;
  letter-spacing: -.02em; }
.pass__d { margin: 0; font-size: clamp(.98rem, 1.4vw, 1.06rem); line-height: 1.7;
  color: var(--color-muted); }
.pass__d strong { color: var(--color-ink); font-weight: 600; }

.pass__go { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pass__l { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; font-weight: 600; font-size: .95rem; line-height: 1.35;
  color: var(--color-ink); text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); transition: background .18s, border-color .18s, transform .18s; }
.pass__l span { color: var(--acc-deep); }
.pass__l:hover { background: var(--jaune-clair); border-color: var(--jaune); transform: translateX(3px); }
.pass__l--fort { background: var(--cta); border-color: var(--cta); color: var(--jaune); }
.pass__l--fort span { color: var(--jaune); }
.pass__l--fort:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--jaune); }

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

/* Les deux blocs de la couverture nationale : le texte et la carte se
   terminent a la meme ligne, quelle que soit la longueur de la liste. */
.cf__duo { align-items: stretch; }
.cf__duo > .cf__carte { display: flex; flex-direction: column; height: 100%; margin: 0; }
.cf__duo .cf__go { margin-top: auto; margin-bottom: 0; }
.cf__carte--carte > img { flex: 1 1 auto; width: 100%; height: auto;
  min-height: 0; object-fit: contain; }
.cf__carte--carte > figcaption { margin-top: auto; padding-top: 1rem; }

/* Un lien pose dans une carte sur fond sombre heritait du brun du corps
   de texte : illisible. Sur fond sombre, un lien se lit en jaune. */
.bloc-sombre .rp-adv a { color: var(--jaune); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(233, 217, 133, .5); }
.bloc-sombre .rp-adv a:hover { color: #fff; text-decoration-color: #fff; }

/* Les cartes de la couverture nationale sont devenues des colonnes flex
   pour s'aligner : sans cela le logo, etire par align-items, occupait
   toute la largeur. Les logos gardent leur taille et restent a gauche. */
.cf__logos { display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.9rem, 2.4vw, 1.6rem); margin-bottom: 1rem; align-self: flex-start; }
.cf__logo { height: 34px; width: auto; flex: 0 0 auto; align-self: center; margin-bottom: 0; }
.cf__logos .cf__sep { width: 1px; height: 26px; background: var(--color-line); flex: 0 0 auto; }
.cf__duo > .cf__carte > .cf__logo { align-self: flex-start; }

/* Les puces des listes etaient de gros anneaux de 13 px. On reprend la
   pastille pleine du logo, en marron : plus discrete, et la meme forme
   que les trois ronds de la signature. */
.rf-frow__li li::before { width: 9px; height: 9px; top: .52em;
  background: var(--acc-deep); border: 0; }

/* ============================================================
   Le devis en ligne (page calculateur).
   Un parcours en cinq etapes : le secteur, deux ou trois
   questions pour estimer le gisement, le materiel, la collecte,
   puis le devis chiffre. Tout se joue cote client, dans devis.js.
   Prefixe dv- pour ne rien heurter d'existant.
   ============================================================ */
.dv { max-width: 880px; margin: 0 auto; }

/* Le fil des etapes */
.dv__fil { display: flex; justify-content: center; gap: clamp(.3rem, 1.4vw, .9rem);
  flex-wrap: wrap; margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); padding: 0; list-style: none; }
.dv__fil li { display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--color-muted); }
.dv__fil li::before { content: attr(data-n); display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: .8rem;
  background: var(--color-bg); border: 1.5px solid var(--color-line); color: var(--color-muted); }
.dv__fil li[aria-current="step"] { color: var(--color-ink); }
.dv__fil li[aria-current="step"]::before { background: var(--color-brand-dark);
  border-color: var(--color-brand-dark); color: #E9D985; }
.dv__fil li.dv__fil--fait { color: var(--color-brand-primary); }
.dv__fil li.dv__fil--fait::before { content: "\2713"; background: #E9D985;
  border-color: #E9D985; color: var(--color-brand-dark); }

/* La carte de l'etape courante */
.dv__carte { background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3.5vw, 2.6rem); }
.dv__q { margin: 0 0 .4rem; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.2;
  letter-spacing: -.02em; }
.dv__aide { margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.6; color: var(--color-muted); }

/* Les grands choix (secteur, oui/non, materiel) */
.dv__choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .8rem; margin: 0; padding: 0; list-style: none; }
.dv__opt { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  width: 100%; padding: 1.05rem 1.15rem; text-align: left; cursor: pointer;
  font: inherit; background: var(--color-bg-soft); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md); transition: border-color .15s, background .15s, transform .15s; }
.dv__opt:hover { border-color: var(--color-brand-primary); transform: translateY(-2px); }
.dv__opt.is-choisi { border-color: var(--color-brand-dark); background: #F5EDBF; }
.dv__opt-t { font-weight: 700; font-size: 1rem; color: var(--color-ink); }
.dv__opt-d { font-size: .85rem; line-height: 1.45; color: var(--color-muted); }
.dv__opt-prix { margin-top: .35rem; font-weight: 700; font-size: .92rem; color: var(--color-brand-primary); }

/* Les champs de la phase gisement */
.dv__champs { display: grid; gap: 1.15rem; }
.dv__ch { display: flex; flex-direction: column; gap: .35rem; }
.dv__ch label { font-weight: 600; font-size: .95rem; color: var(--color-ink); }
.dv__ch .dv__note { font-size: .82rem; color: var(--color-muted); }
.dv__ch input[type="number"] { font: inherit; font-size: 1.05rem; padding: .65em .8em;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-ink); width: 100%; max-width: 240px; }
.dv__ch input[type="number"]:focus { outline: 2px solid var(--color-brand-primary); outline-offset: 1px; }
.dv__seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.dv__seg button { font: inherit; font-size: .9rem; font-weight: 600; padding: .55em .95em;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-ink); cursor: pointer;
  transition: background .15s, border-color .15s; }
.dv__seg button:hover { border-color: var(--color-brand-primary); }
.dv__seg button.is-choisi { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #E9D985; }

/* La jauge de gisement, mise a jour en direct */
.dv__jauge { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-md);
  background: var(--color-bg-soft); border: 1px solid var(--color-line); }
.dv__jauge-t { font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-brand-primary); }
.dv__jauge-v { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--color-ink); font-variant-numeric: tabular-nums; }
.dv__jauge-v small { font-size: .55em; font-weight: 600; color: var(--color-muted); }
.dv__jauge-barre { height: 8px; margin-top: .6rem; border-radius: 999px;
  background: var(--color-line); overflow: hidden; }
.dv__jauge-barre i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #E9D985, #997A66); border-radius: 999px;
  transition: width .35s ease; }

/* La navigation entre etapes */
.dv__nav { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.6rem; }
.dv__retour { font: inherit; font-size: .92rem; font-weight: 600; color: var(--color-muted);
  background: none; border: 0; cursor: pointer; padding: .5em 0; }
.dv__retour:hover { color: var(--color-ink); }

/* Le recapitulatif final */
.dv__recap { margin: 0 0 1.2rem; padding: 0; list-style: none;
  border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.dv__recap li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 1.1rem; font-size: .95rem; background: var(--color-bg); }
.dv__recap li + li { border-top: 1px solid var(--color-line); }
.dv__recap .dv__lq { color: var(--color-muted); font-size: .84rem; display: block; }
.dv__recap li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.25rem; border-radius: var(--radius-md);
  background: var(--color-brand-dark); color: #FDFBF4; margin-bottom: .6rem; }
.dv__total b { font-size: clamp(1.5rem, 2.8vw, 1.9rem); letter-spacing: -.02em;
  color: #E9D985; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv__total span { font-size: .95rem; }
.dv__mention { font-size: .82rem; line-height: 1.55; color: var(--color-muted); margin: .8rem 0 1.4rem; }
.dv__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

/* L'ecran hors perimetre (plus de trois tonnes) */
.dv__stop { text-align: left; }
.dv__stop .dv__q { color: var(--color-ink); }

@media (max-width: 640px) {
  .dv__fil li span { display: none; }           /* les pastilles suffisent */
  .dv__fil { gap: .55rem; }
  .dv__choix { grid-template-columns: 1fr; }
}

/* Le formulaire de coordonnees avant le PDF du devis */
.dv__pdf { margin-top: 1.4rem; padding: 1.25rem 1.35rem; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); background: var(--color-bg-soft); }
.dv__pdf-t { margin: 0 0 1rem; font-weight: 600; color: var(--color-ink); }
.dv__pdf-g { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; margin-bottom: 1.1rem; }
.dv__pdf .dv__ch input { max-width: none; font-size: .98rem; }
.dv__pdf-err { margin: 0 0 1rem; padding: .7rem .95rem; border-left: 3px solid #b3261e;
  border-radius: 6px; background: rgba(179, 38, 30, .07); color: #8c1d18; font-size: .88rem; }
@media (max-width: 560px) { .dv__pdf-g { grid-template-columns: 1fr; } }

/* Correctifs du devis apres l'audit d'accessibilite */
.dv__ch input[type="number"] { border-color: var(--brun); }   /* 1,4:1 -> 3,9:1 sur blanc */
.dv__pdf .dv__ch input { border-color: var(--brun); }
.dv__opt:focus-visible, .dv__seg button:focus-visible, .dv__retour:focus-visible,
.dv__carte:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
@media (max-width: 640px) {
  .dv__nav { flex-wrap: wrap; }
  .dv__nav .btn { white-space: normal; }
  /* les libelles du fil restent lisibles par les lecteurs d'ecran */
  .dv__fil li span { display: inline-block; position: absolute; clip-path: inset(50%);
    width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
}

/* Le heros bref : la page du devis ne vend pas, elle outille. La photo
   plante le decor sur un demi-ecran et l'outil arrive tout de suite. */
.page-service__hero--bref { min-height: clamp(360px, 46vh, 500px); }
.page-service__hero--bref > .container { padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.page-service__hero--bref .page-service__hero__media img { object-fit: cover; width: 100%; height: 100%; object-position: 72% 42%; }

/* ============================================================
   « Pour qui » illustre, sur la page du jardin composteur.
   Quatre cartes texte ne disaient pas ou l'equipement se pose :
   la photo le montre en une seconde. Section sur fond sombre.
   ============================================================ */
.pqi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem); }
.pqi__c { display: flex; flex-direction: column; margin: 0; overflow: hidden;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg); }
.pqi__vue { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.pqi__vue img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.pqi__c:hover .pqi__vue img { transform: scale(1.04); }
.pqi__txt { padding: clamp(1rem, 2vw, 1.35rem); }
.pqi__t { margin: 0 0 .45rem; font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.25;
  color: #fff; }
.pqi__d { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* Le heros du jardin composteur porte une photo qu'un cadre panoramique
   mutilerait : on lui laisse de la hauteur, et le point de mire descend
   sur l'equipement sans perdre le ciel. */
.page-service__hero--photo { min-height: clamp(540px, 82vh, 820px); }
.page-service__hero--photo .page-service__hero__media img { object-position: 50% 64%; }
@media (max-width: 780px) {
  .page-service__hero--photo { min-height: clamp(420px, 62vh, 560px); }
  .page-service__hero--photo .page-service__hero__media img { object-position: 58% 66%; }
}

/* ============================================================
   Le chantier en trois temps, sous la mise en route.
   Le texte dit comment on monte le massif ; ces trois photos
   le montrent, dans l'ordre ou ca se passe.
   ============================================================ */
.chant { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.5rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.chant__e { margin: 0; }
.chant__vue { margin: 0 0 .7rem; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius-md); background: var(--color-bg-soft); }
.chant__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chant__l { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--color-muted); }
.chant__n { font-weight: 700; color: var(--acc-deep); margin-right: .35rem; }

/* Les deux temps d'un deploiement, en reference */
.ref2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.8rem); }
.ref2__i { margin: 0; }
.ref2__i img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ref2__i figcaption { margin-top: .8rem; font-size: .92rem; line-height: 1.55; color: var(--color-muted); }

@media (max-width: 760px) {
  .chant { grid-template-columns: 1fr; }
  .ref2 { grid-template-columns: 1fr; }
}

/* La photo d'atelier sous le configurateur : les teintes proposees a
   l'ecran existent en vrai, laquees et alignees sur palette. */
.cfg__preuve { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.cfg__preuve img { width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cfg__preuve figcaption { margin-top: .85rem; font-size: .92rem; line-height: 1.55;
  color: var(--color-muted); max-width: 62ch; }

/* La gamme de couleurs se lit en bandeau : on cadre la rangee de
   composteurs, pas la charpente de l'atelier. */
.cfg__preuve img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }

/* ============================================================
   Le devis en ligne, deuxieme passe : les cartes secteur portent
   un pictogramme, le formulaire du PDF valide champ par champ.
   ============================================================ */
.dv__opt--secteur { position: relative; background: #fff; border: 1.5px solid var(--color-line);
  padding: 1.2rem 1.2rem 1.05rem; gap: .35rem; }
.dv__opt--secteur:hover { border-color: var(--brun); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.dv__opt--secteur.is-choisi { border-color: var(--color-brand-dark); background: #F5EDBF; }
.dv__opt-ic { display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--jaune-clair); color: var(--acc-deep); margin-bottom: .45rem; }
.dv__opt--secteur.is-choisi .dv__opt-ic { background: var(--jaune); color: var(--color-brand-dark); }
.dv__opt-ic svg { width: 22px; height: 22px; }
.dv__opt-go { position: absolute; right: 1.05rem; bottom: .85rem; font-size: 1.05rem;
  color: var(--brun); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.dv__opt--secteur:hover .dv__opt-go, .dv__opt--secteur.is-choisi .dv__opt-go { opacity: 1; transform: none; }

/* Le formulaire du PDF : blanc, net, et honnete sur ce qui manque */
.dv__pdf { background: #fff; border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.dv__pdf .dv__ch input { border-radius: 10px; padding: .72em .9em; transition: border-color .15s, box-shadow .15s; }
.dv__pdf .dv__ch input::placeholder { color: #B7AD97; }
.dv__pdf .dv__ch input.is-ok { border-color: var(--vert, #AFC97E); }
.dv__pdf .dv__ch input.is-ko { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .08); }
.dv__err-champ { font-size: .78rem; line-height: 1.4; color: #8c1d18; }
.dv__pdf button[type="submit"][disabled] { opacity: .45; cursor: not-allowed;
  transform: none; box-shadow: none; }

/* Sur l'accueil, le devis en ligne passe devant le rappel telephonique :
   c'est la voie sans attente, on la montre comme telle. */
.plg-devis { position: relative; display: block; margin: 1.3rem 0 0; padding: 1.15rem 3rem 1.15rem 1.25rem;
  background: var(--color-brand-dark); border-radius: var(--radius-md);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s; }
.plg-devis:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.plg-devis__t { display: block; font-weight: 700; font-size: 1.05rem; color: var(--jaune); margin-bottom: .3rem; }
.plg-devis__d { display: block; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.plg-devis__go { position: absolute; right: 1.15rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; color: var(--jaune); transition: transform .18s; }
.plg-devis:hover .plg-devis__go { transform: translateY(-50%) translateX(4px); }
.plg-ou { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 .9rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.plg-ou::before, .plg-ou::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }

/* ============================================================
   Peazy au centre, vraiment. Le groupe bulle + mascotte etait
   centre en bloc : la bulle etant bien plus large, le personnage
   derivait a droite de l'axe de la page. Desormais c'est Peazy
   qui tient l'axe, et la bulle s'accroche a sa gauche.
   ============================================================ */
.peazy { position: relative; justify-content: center; }
.peazy__dit { position: absolute; right: calc(50% + clamp(70px, 9vw, 104px));
  bottom: 2.1rem; margin-bottom: 0; width: max-content; }
.peazy--grand .peazy__dit { right: calc(50% + clamp(90px, 11vw, 132px)); }
.peazy--mini .peazy__dit { right: calc(50% + clamp(56px, 7vw, 76px)); }

@media (max-width: 700px) {
  /* en colonne : la bulle au-dessus, la pointe vers le bas */
  .peazy__dit { position: static; width: auto; margin-bottom: 1.2rem; }
  .peazy { flex-direction: column; align-items: center; }
  .peazy__dit::before { right: auto; left: 50%; bottom: -10px; transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-color: var(--color-line) transparent transparent transparent; }
  .peazy__dit::after { right: auto; left: 50%; bottom: -8px; transform: translateX(-50%);
    border-width: 9px 7px 0 7px;
    border-color: var(--color-bg) transparent transparent transparent; }
}

/* L'accueil alterne ses fonds : trois sections creme se suivaient
   (estimation, questions, configurateur) et l'oeil ne separait plus
   rien. Une section sur deux passe au sable. */
#questions { background: #F7F2E1; }
#bp { background: #F7F2E1; }

/* ============================================================
   Peazy tient la conversation, comme sur une messagerie : sa
   tete en avatar rond, la pastille verte de presence, et son
   visage a cote de chaque reponse.
   ============================================================ */
.qs__peazy { position: relative; flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--jaune-clair); border: 1.5px solid var(--jaune);
  overflow: visible; }
.qs__peazy img { width: 72%; height: 72%; object-fit: contain; }
.qs__enligne { position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #4CAF50; border: 2px solid var(--color-bg); }

/* le bandeau de tete de la conversation */
.qs__tete { display: flex; align-items: center; gap: .7rem;
  padding: .55rem .2rem .75rem; border-bottom: 1px solid var(--color-line);
  margin-bottom: .6rem; }
.qs__tete .qs__peazy { width: 40px; height: 40px; }
.qs__tete-t { display: flex; flex-direction: column; line-height: 1.25; }
.qs__tete-t strong { font-size: .95rem; color: var(--color-ink); }
.qs__tete-t small { font-size: .76rem; color: var(--color-muted); }
.qs__tete-t small::before { content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #4CAF50; margin-right: .35rem; }

/* chaque reponse arrive avec la tete de Peazy */
.qs-m--bot { display: flex; align-items: flex-end; gap: .5rem; }
.qs-m__peazy { flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--jaune-clair); border: 1px solid var(--jaune);
  margin-bottom: .15rem; }
.qs-m__peazy img { width: 72%; height: 72%; object-fit: contain; }
.qs-m--bot > p { flex: 1 1 auto; min-width: 0; }

/* L'avatar de Peazy vit HORS de la bulle, comme sur une messagerie :
   le conteneur bot redevient transparent, c'est son paragraphe qui
   porte la bulle. */
.qs-m--bot { background: none; border: 0; padding: 0; border-radius: 0; }
.qs-m--bot > p { background: var(--bg-1, #FDFBF4); border: 1px solid var(--color-line);
  border-radius: 14px 14px 14px 4px; padding: .8rem 1rem; color: var(--sand-ink, #3F2F22); }
.qs-m--attente { padding: 0; }
.qs-m--attente .qs-m__pts { display: flex; gap: .3rem; align-items: center;
  margin: 0; min-height: 1rem; }

/* L'avatar plein cadre : le visage remplit le cercle, comme sur une
   vraie messagerie. Le PNG est deja carre et cadre sur la tete. */
.qs__peazy { background: #fff; }
.qs__peazy img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.qs-m__peazy { background: #fff; }
.qs-m__peazy img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============================================================
   Peazy, troisieme et derniere passe : la composition est une
   colonne centree, a toutes les largeurs. La bulle au-dessus,
   pointe vers le bas, la mascotte dessous, le tout sur l'axe.
   Plus rien ne depasse d'un cote : c'est centre dans le blanc,
   partout pareil.
   ============================================================ */
.peazy { flex-direction: column; align-items: center; }
.peazy__dit { position: static; width: auto; max-width: 36ch;
  margin-bottom: 1.2rem; text-align: center; }
.peazy__dit::before { right: auto; left: 50%; bottom: -10px; top: auto;
  transform: translateX(-50%);
  border-width: 10px 8px 0 8px;
  border-color: var(--color-line) transparent transparent transparent; }
.peazy__dit::after { right: auto; left: 50%; bottom: -8px; top: auto;
  transform: translateX(-50%);
  border-width: 9px 7px 0 7px;
  border-color: var(--color-bg) transparent transparent transparent; }
/* les fonds sombres gardent leur pointe assortie */
.mip .peazy__dit::before, .manifesto .peazy__dit::before {
  border-color: rgba(253,251,244,.3) transparent transparent transparent; }
.mip .peazy__dit::after, .manifesto .peazy__dit::after {
  border-color: rgba(69,58,45,1) transparent transparent transparent; }

/* la bulle reste dans le flux mais redevient l'ancre de sa pointe ;
   right/bottom herites de l'ancienne version absolue sont neutralises */
.peazy__dit { position: relative; right: auto; bottom: auto; }

/* ============================================================
   Les puces du site sont le picto du logo : un des trois points
   de la signature, decoupe du SVG et applique en masque pour
   garder la couleur de chaque contexte.
   ============================================================ */
.rf-frow__li li::before { background: var(--acc-deep); border: 0; border-radius: 0;
  width: 12px; height: 12px; top: .42em;
  -webkit-mask: url("../img/compost/picto-point.svg") center / contain no-repeat;
  mask: url("../img/compost/picto-point.svg") center / contain no-repeat; }
.cf__li li::before { background: var(--acc-deep); border-radius: 0;
  width: 10px; height: 10px; top: .45em;
  -webkit-mask: url("../img/compost/picto-point.svg") center / contain no-repeat;
  mask: url("../img/compost/picto-point.svg") center / contain no-repeat; }
.loc__li li::before { background: var(--jaune); border-radius: 0;
  width: 10px; height: 10px; top: .42em;
  -webkit-mask: url("../img/compost/picto-point.svg") center / contain no-repeat;
  mask: url("../img/compost/picto-point.svg") center / contain no-repeat; }

/* Les variantes --grand et --mini portaient leur propre decalage
   absolu, plus specifique que l'annulation generique : on les
   neutralise nommement. */
.peazy--grand .peazy__dit, .peazy--mini .peazy__dit { right: auto; bottom: auto; }

/* L'encart de signature : le devis Axonaut est pret, on peut signer */
.dv__signer { margin-top: 1.4rem; padding: 1.25rem 1.35rem;
  background: var(--jaune-clair); border: 1.5px solid var(--jaune);
  border-radius: var(--radius-md); }
.dv__signer-t { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--color-ink); }
.dv__signer-d { margin: 0 0 1rem; font-size: .88rem; line-height: 1.6; color: var(--color-muted); }

/* La carte "Parler avec un expert" : meme gabarit que les secteurs,
   mais elle s'assume comme un lien, pas comme un choix de calcul. */
.dv__opt--expert { text-decoration: none; background: var(--jaune-clair); border-style: dashed; }
.dv__opt--expert:hover { border-style: solid; }

/* ============================================================
   Le parcours "Comment ca marche" : neuf etapes en cartes
   illustrees, trois par rangee (deux pour le temps d'installation).
   ============================================================ */
.cmm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem); }
.cmm--deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cmm__c { display: flex; flex-direction: column; margin: 0; overflow: hidden;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cmm__vue { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-soft); }
.cmm__vue img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.cmm__c:hover .cmm__vue img { transform: scale(1.04); }
.cmm__txt { display: flex; flex-direction: column; flex: 1;
  padding: clamp(1rem, 2vw, 1.35rem); }
.cmm__n { font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--acc-deep); margin-bottom: .4rem; }
.cmm__t { margin: 0 0 .5rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.25; }
.cmm__d { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.6; color: var(--color-muted); }
.cmm__go { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: .9rem;
  color: var(--cta); text-decoration: none; border-bottom: 2px solid var(--jaune);
  padding-bottom: .1rem; }
.cmm__go:hover { border-bottom-color: var(--cta); }

/* Les rangees du parcours se remplissent exactement */
.cmm--deux { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin-inline: auto; }
.cmm--trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .cmm--deux, .cmm--trois { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ============================================================
   La page des implantations : la carte nationale en grand, et
   le volet europeen en deux colonnes (carte + ce qui change).
   ============================================================ */
.carte-nat { margin: 0; max-width: 720px; margin-inline: auto; }
.carte-nat img { width: 100%; height: auto; display: block; }
.carte-nat figcaption { margin-top: 1rem; text-align: center; font-size: .92rem;
  line-height: 1.6; color: var(--color-muted); max-width: 56ch; margin-inline: auto; }

.eur { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem); }
.eur__carte { margin: 0; }
.eur__carte img { width: 100%; height: auto; display: block; }
.eur__txt { display: grid; gap: clamp(.9rem, 2vw, 1.2rem); }
.eur__c { margin: 0; padding: clamp(1.15rem, 2.4vw, 1.6rem);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.eur__c--fr { background: var(--jaune-clair); border-color: var(--jaune); }
.eur__k { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc-deep); margin-bottom: .4rem; }
.eur__t { margin: 0 0 .5rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.25; }
.eur__d { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--color-muted); }
.eur__d strong { color: var(--color-ink); font-weight: 600; }
.eur__note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--color-muted); }

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

/* ============================================================
   La page pilier de la loi AGEC : une frise de seuils, des
   cartes d'obligation, un barème de sanctions et le renvoi
   vers les articles de fond.
   ============================================================ */

/* La frise : la disparition progressive des seuils */
.frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .55rem; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.frise__e { display: flex; flex-direction: column; gap: .2rem; padding: .9rem .85rem;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); text-align: center; }
.frise__d { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.frise__s { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; color: var(--color-ink);
  line-height: 1.15; font-variant-numeric: tabular-nums; }
.frise__q { font-size: .74rem; line-height: 1.4; color: var(--color-muted); }
.frise__e--zero { background: var(--color-brand-dark); border-color: var(--color-brand-dark); }
.frise__e--zero .frise__d { color: var(--jaune); }
.frise__e--zero .frise__s { color: #fff; }
.frise__e--zero .frise__q { color: rgba(255,255,255,.8); }

/* Les obligations, en cartes numerotees */
.obl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem); }
.obl__c { margin: 0; padding: clamp(1.15rem, 2.4vw, 1.5rem);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.obl__n { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .7rem;
  border-radius: 50%; background: var(--jaune); color: var(--color-brand-dark);
  font-weight: 700; font-size: .85rem; }
.obl__t { margin: 0 0 .45rem; font-size: 1.02rem; line-height: 1.3; }
.obl__d { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--color-muted); }

/* Le bareme des sanctions */
.bareme { width: 100%; border-collapse: collapse; margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  font-size: .93rem; }
.bareme caption { text-align: left; font-size: .85rem; color: var(--color-muted);
  margin-bottom: .7rem; }
.bareme th, .bareme td { padding: .8rem .9rem; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.14); }
.bareme thead th { font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jaune); border-bottom-color: rgba(255,255,255,.25); }
.bareme td:last-child, .bareme th:last-child { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600; }
.bareme tbody tr:last-child td { border-bottom: 0; }

/* Les renvois vers les articles de fond */
.lire { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(.8rem, 1.8vw, 1.1rem); }
.lire__a { display: flex; flex-direction: column; gap: .3rem; padding: 1.05rem 1.2rem;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.lire__a:hover { border-color: var(--brun); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.lire__k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-deep); }
.lire__t { font-weight: 600; font-size: .97rem; line-height: 1.35; color: var(--color-ink); }
.lire__d { font-size: .85rem; line-height: 1.5; color: var(--color-muted); }

/* L'encart de mise en garde */
.avert { margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; padding: 1.1rem 1.3rem;
  background: var(--color-bg-soft); border-left: 3px solid var(--brun);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: .88rem; line-height: 1.65; color: var(--color-muted); }

@media (max-width: 640px) {
  .bareme thead { position: absolute; clip-path: inset(50%); }
  .bareme td { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border: 0; }
  .bareme tbody tr { display: block; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .bareme td::before { content: attr(data-l); font-weight: 600; color: var(--jaune); }
}

/* Le signe moins des chiffres cles : place dans .pv__n, il heritait du
   style de surtitre (petit, en bloc, decale d'une ligne) et se lisait
   « 50 % » avec un tiret perdu au-dessus. Colle au chiffre, il se lit
   « -50 % ». Les .pv__k hors de .pv__n restent des surtitres. */
.pv__n > .pv__k {
  display: inline-block; height: auto; margin: 0; align-self: baseline;
  font-size: inherit; font-weight: inherit; letter-spacing: -.02em;
  text-transform: none; color: inherit;
}
.pv__n:has(> .pv__k) { gap: 0; }
.pv__n:has(> .pv__k) .pv__u { margin-left: .35rem; }

/* La frise compte sept paliers : on les repartit exactement */
.frise { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 860px) { .frise { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .frise { grid-template-columns: repeat(2, 1fr); } }

/* L'encart d'avertissement posé sur une section sombre gardait son fond
   crème et son texte gris : illisible. Sur fond sombre il s'inverse. */
.bloc-sombre .avert {
  background: rgba(253, 251, 244, .08);
  border-left-color: var(--jaune);
  color: rgba(255, 255, 255, .88);
}
.bloc-sombre .avert strong { color: #fff; }
/* la légende du barème et les cellules suivent la même logique */
.bloc-sombre .bareme caption { color: rgba(255, 255, 255, .72); }


/* ============================================================
   La FAQ, redessinee aux jetons du site. Meme squelette que les
   sites jumeaux (recherche, frequentes/toutes, accordeon,
   navigation collante), mais pas une couleur importee.
   ============================================================ */
.fq-hero { background: var(--color-brand-dark); padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.8rem, 6vw, 4.5rem); text-align: center; }
.fq-hero .kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--jaune); margin-bottom: 1rem; }
.fq-hero h1 { margin: 0 0 .9rem; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12;
  letter-spacing: -.02em; color: #fff; }
.fq-hero .em { font-style: normal; color: var(--jaune); }
.fq-hero p { margin: 0 auto; max-width: 58ch; font-size: 1.02rem; line-height: 1.65; color: #E3D9BE; }
.fq-search { position: relative; max-width: 560px; margin: 1.8rem auto 0; }
.fq-search .si { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--color-muted); display: grid; place-items: center; }
.fq-search input { width: 100%; font: inherit; font-size: 1rem; color: var(--color-ink);
  padding: .95em 1.2em .95em 3rem; border: 0; border-radius: var(--radius-pill);
  background: #fff; box-shadow: var(--shadow-lift); }
.fq-search input:focus { outline: 3px solid var(--jaune); outline-offset: 2px; }

.fq-sec { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--color-bg-soft); }
.fq-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start; }
.fq-nav { position: sticky; top: 140px; display: flex; flex-direction: column; gap: .4rem; }
.fq-nav .lab { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: .5rem; }
.fq-nav a { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  padding: .6em 1em; border-radius: var(--radius-pill); text-decoration: none;
  font-weight: 600; font-size: .93rem; color: var(--color-ink); transition: background .15s; }
.fq-nav a:hover { background: var(--jaune-clair); }
.fq-nav a.on { background: var(--color-brand-dark); color: var(--jaune); }
.fq-nav .count { font-weight: 600; font-size: .8rem; color: var(--color-muted); }
.fq-nav a.on .count { color: rgba(233, 217, 133, .75); }

.fq-modebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.fq-toggle { display: inline-flex; gap: .3rem; padding: .3rem; background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
.fq-toggle button { font: inherit; font-size: .9rem; font-weight: 600; color: var(--color-ink);
  padding: .5em 1.1em; border: 0; border-radius: var(--radius-pill); background: none;
  cursor: pointer; transition: background .15s; }
.fq-toggle button.on { background: var(--color-brand-dark); color: var(--jaune); }
.fq-count { font-size: .92rem; color: var(--color-muted); }
.fq-count b { color: var(--color-ink); }

.fq-noresult { display: none; margin-bottom: 1.4rem; padding: 1.1rem 1.3rem;
  background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  color: var(--color-muted); line-height: 1.6; }
.fq-noresult.show { display: block; }
.fq-noresult b { color: var(--color-ink); }

.fq-cat { margin-bottom: clamp(2.4rem, 5vw, 3.5rem); }
.fq-cat.hidden { display: none; }
.fq-cat-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.fq-cat-head .ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%; background: var(--jaune); color: var(--color-brand-dark);
  font-weight: 700; font-size: 1.05rem; }
.fq-cat-head h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.2; }
.fq-cat-head .desc { font-size: .9rem; color: var(--color-muted); margin-top: .15rem; }

.fq-item { background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); margin-bottom: .85rem; transition: border-color .15s, box-shadow .15s; }
.fq-item .q { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  width: 100%; padding: 1.1rem 1.3rem; font: inherit; font-weight: 600; font-size: 1rem;
  text-align: left; color: var(--color-ink); background: none; border: 0; cursor: pointer; }
.fq-item .q .ic { color: var(--brun); font-size: 1.2rem; line-height: 1; flex: none;
  transition: transform .2s; }
.fq-item .a { display: none; padding: 0 1.3rem 1.2rem; font-size: .95rem; line-height: 1.7;
  color: var(--color-muted); }
.fq-item .a a { color: var(--cta); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--jaune); }
.fq-item .a a:hover { border-bottom-color: var(--cta); }
.fq-item.open { border-color: var(--jaune); box-shadow: var(--shadow-sm); }
.fq-item.open .a { display: block; }
.fq-item.open .q .ic { transform: rotate(45deg); }

/* le mode "frequentes" ne montre que les questions etoilees, et
   masque les categories qui n'en ont aucune */
.stars-only .fq-item:not([data-star]) { display: none; }
.stars-only .fq-cat:not(:has(.fq-item[data-star])) { display: none; }

.fq-links { padding: clamp(3rem, 6vw, 4.5rem) 0; background: #F7F2E1; }
.fq-links h2 { margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  letter-spacing: -.02em; }
.fq-links .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem); }
.fq-link { display: flex; flex-direction: column; gap: .4rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem); background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.fq-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--brun); }
.fq-link b { font-size: 1.02rem; color: var(--color-ink); }
.fq-link span { font-size: .9rem; line-height: 1.55; color: var(--color-muted); }

@media (max-width: 900px) {
  .fq-layout { grid-template-columns: 1fr; }
  .fq-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .fq-nav .lab { flex-basis: 100%; }
  .fq-nav a { font-size: .86rem; padding: .5em .85em; }
}

/* Blog : le mot accentué du héros sombre, même jaune que la FAQ. */
.res-hero .em, .gl-hero .em { color: var(--jaune); }

/* Tête d'article : la photo de la vignette, entière, jamais recadrée. */
.photo-break__media--pleine { aspect-ratio: auto; border-radius: var(--radius-lg); }
.photo-break__media--pleine img { height: auto; object-fit: unset; }

/* Le groupe compte quatre sociétés depuis Easy to Carry. */
.grp__g { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grp__g { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grp__g { grid-template-columns: 1fr; } }

/* Page contact : les coordonnées, en trois entrées lisibles. */
.ctc__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ctc__c { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.35rem 1.4rem; }
.ctc__k { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.ctc__n { margin: .5rem 0 .45rem; font-size: 1.05rem; font-weight: 600; color: var(--color-ink); line-height: 1.35; }
.ctc__n a { color: var(--acc-deep); }
.ctc__n a:hover { text-decoration: underline; }
.ctc__l { margin: 0; font-size: .92rem; color: var(--color-muted); line-height: 1.6; }
.ctc__l a { color: var(--acc-deep); font-weight: 600; }
@media (max-width: 900px) { .ctc__g { grid-template-columns: 1fr; } }

/* ---------- Pages secteur : cas type, etude de cas, questions ---------- */

/* Le cas type chiffre : le gisement a gauche, le devis qui en decoule a droite. */
.cast__g { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.cast__calc, .cast__devis { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.9rem); }
.cast__devis { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #F5EDBF; }
.cast__t { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 1rem; }
.cast__devis .cast__t { color: var(--jaune); }
.cast__ul { list-style: none; margin: 0; padding: 0; }
.cast__l, .cast__ul--devis li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--color-line); }
.cast__ul--devis li { border-bottom-color: rgba(245, 237, 191, .18); }
.cast__k { font-weight: 600; color: var(--color-ink); }
.cast__ul--devis .cast__k { color: #fff; }
.cast__d { font-size: .88rem; color: var(--color-muted); flex: 1 1 auto; }
.cast__ul--devis .cast__d { color: rgba(245, 237, 191, .72); }
.cast__ul--devis b { font-weight: 700; color: var(--jaune); font-size: 1rem; }
.cast__res { margin: 1.1rem 0 .4rem; font-size: 1.02rem; color: var(--color-ink); }
.cast__res__n { display: block; font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 700; color: var(--acc-deep); line-height: 1.1; }
.cast__note { margin: .5rem 0 0; font-size: .86rem; color: var(--color-muted); line-height: 1.55; }
.cast__devis .cast__note { color: rgba(245, 237, 191, .72); }
.cast__total { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 1.1rem 0 .2rem; padding-top: .9rem; border-top: 2px solid var(--jaune); }
.cast__total__k { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jaune); }
.cast__total__n { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 700; color: #fff; line-height: 1; }
.cast__total__u { font-size: .95rem; font-weight: 500; color: rgba(245, 237, 191, .8); }
.cast__devis .btn { margin-top: 1.1rem; }

/* Les deux formules, cote a cote. */
.rp-advgrid--deux { grid-template-columns: 1fr 1fr; }
.rp-carte__u { font-size: .95rem; font-weight: 500; color: var(--color-muted); }
.rp-carte--reco { box-shadow: inset 0 0 0 2px var(--acc-deep); }

/* L'obligation legale, en bloc plein. */
.agc__b { background: var(--jaune-clair, #F5EDBF); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem); max-width: 860px; margin-inline: auto; }
.agc__k { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-deep); }
.agc__h { margin: .6rem 0 .8rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; color: var(--color-ink); }
.agc__p { margin: 0 0 .8rem; color: var(--color-ink); line-height: 1.65; }

/* L'encart d'etude de cas, en attente de son contenu. */
.case--attente { max-width: 820px; margin-inline: auto; text-align: center; }
.case__att { margin: 0 0 .9rem; color: rgba(245, 237, 191, .88); line-height: 1.65; }
.case__att--fin { color: rgba(245, 237, 191, .7); font-size: .92rem; }

/* Les questions du secteur : accordeon natif, sans script. */
.sfaq__g { max-width: 820px; margin-inline: auto; }
.sfaq__i { background: #fff; border: 1px solid var(--color-line); border-radius: 12px; margin-bottom: .6rem; overflow: hidden; }
.sfaq__i[open] { border-color: var(--acc-deep); }
.sfaq__q { list-style: none; cursor: pointer; padding: .95rem 2.6rem .95rem 1.1rem; font-weight: 600; color: var(--color-ink); position: relative; line-height: 1.45; }
.sfaq__q::-webkit-details-marker { display: none; }
.sfaq__q::after { content: ''; position: absolute; right: 1.1rem; top: 1.25rem; width: 9px; height: 9px; border-right: 2px solid var(--acc-deep); border-bottom: 2px solid var(--acc-deep); transform: rotate(45deg); transition: transform .18s; }
.sfaq__i[open] .sfaq__q::after { transform: rotate(-135deg); }
.sfaq__q:hover { background: var(--color-bg-soft); }
.sfaq__r { padding: 0 1.1rem 1.05rem; }
.sfaq__r p { margin: 0; color: var(--color-muted); line-height: 1.65; }

@media (max-width: 860px) {
  .cast__g, .rp-advgrid--deux { grid-template-columns: 1fr; }
}

/* La pastille d'etude de cas heritait du brun : illisible sur fond sombre. */
.case__ctx, .case-study__descriptor { background: var(--jaune-clair); color: var(--color-ink); }

/* Trois options comparees, cote a cote. */
.rp-advgrid--trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .rp-advgrid--trois { grid-template-columns: 1fr; } }
.case__quote { font-size: 1.05rem; }

/* L'etude de cas mise en avant depuis une page secteur : la carte est cliquable. */
.case--lien { display: block; max-width: 820px; margin-inline: auto; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.case--lien:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(46, 36, 25, .34); }
.case__go { display: inline-block; margin-top: .4rem; font-weight: 600; color: var(--jaune); }
.case--lien .case__att { text-align: left; }

/* Deux regles anciennes posaient de l'encre foncee sur des pastilles a fond brun
   et du brun sur le fond sombre des temoignages : contraste sous le seuil. */
.section-header__eyebrow, .sector-hero__eyebrow { color: #fff; }
.sector-hero--media .sector-hero__eyebrow { color: #fff; }
.case__who { color: var(--jaune); }

/* Comparaison d'options : les cartes deviennent de vraies cartes, et la solution
   retenue se distingue par le jaune de la charte plutot que par un liseré nu. */
.rp-advgrid--trois > .rp-carte,
.rp-advgrid--deux > .rp-carte {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}
.rp-advgrid--trois > .rp-carte h3,
.rp-advgrid--deux > .rp-carte h3 { margin: .7rem 0 .5rem; }
.rp-advgrid--trois > .rp-carte p,
.rp-advgrid--deux > .rp-carte p { margin: 0 0 .7rem; }
.rp-advgrid--trois > .rp-carte > .materiel-link,
.rp-advgrid--deux > .rp-carte > .materiel-link { margin-top: auto; }
.rp-advgrid--trois > .rp-carte > .bp__tag,
.rp-advgrid--deux > .rp-carte > .bp__tag { align-self: flex-start; }

.rp-advgrid--trois > .rp-carte--reco,
.rp-advgrid--deux > .rp-carte--reco {
  box-shadow: 0 16px 40px -22px rgba(46, 36, 25, .45);
  border: 2px solid var(--jaune);
  background: linear-gradient(180deg, #FFFCEE 0%, #fff 42%);
}
.rp-carte--reco > .bp__tag { background: var(--jaune); color: var(--color-ink); }
.rp-advgrid--trois > .rp-carte .rp-adv__rep,
.rp-advgrid--deux > .rp-carte .rp-adv__rep { margin-top: auto; padding-top: .5rem; }

/* Etude de cas encore a documenter : le texte remplace la ligne de chiffres. */
.vd__att { display: block; color: #E3D9BE; font-size: .95rem; line-height: 1.6; max-width: 54ch; margin-bottom: 1.3rem; }

/* L'option collecte, sous le total : visible sans voler la vedette au prix bas. */
.cast__opt { margin: .9rem 0 0; padding: .75rem .85rem; border-radius: 12px; background: rgba(245, 237, 191, .1); border: 1px solid rgba(245, 237, 191, .22); font-size: .88rem; line-height: 1.55; color: rgba(245, 237, 191, .88); }
.cast__opt__k { display: inline-block; margin-right: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--jaune); }
.cast__opt b { color: #fff; font-weight: 700; }

/* Un sommaire plus long que l'ecran defile dans sa colonne plutot que d'etre coupe. */
@media (min-width: 1100px) {
  .blog-article > .blog-toc { max-height: calc(100vh - var(--gr-hauteur, 62px) - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .blog-article > .blog-toc::-webkit-scrollbar { width: 4px; }
  .blog-article > .blog-toc::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 2px; }
}

/* Le groupe Easy To, sur sa propre ligne : quatre societes, pas une colonne. */
.site-footer__groupe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem; padding: 1.4rem 0 0; margin-top: 1.6rem; border-top: 1px solid rgba(245, 237, 191, .16); }
.site-footer__groupe__k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jaune); }
.site-footer__groupe__l { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.site-footer__groupe__l a { font-size: .9rem; color: rgba(245, 237, 191, .82); text-decoration: none; }
.site-footer__groupe__l a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; }

/* ---------- Articles : les composants de preuve ---------- */

/* Tableaux : le squelette existait, il leur manquait des filets et une tete lisible. */
.blog-article table { margin: 1.8rem 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.blog-article thead th { background: var(--color-bg-soft); text-align: left; font-weight: 700; font-size: .82rem; letter-spacing: .01em; color: var(--color-ink); border-bottom: 2px solid var(--color-line); }
.blog-article td, .blog-article th { border-bottom: 1px solid var(--color-line); vertical-align: top; }
.blog-article tbody tr:last-child td { border-bottom: 0; }
.blog-article table caption { caption-side: bottom; padding-top: .6rem; font-size: .82rem; color: var(--color-muted); text-align: left; }

/* Le chiffre ou la regle a retenir, sorti du fil du texte. */
.blog-encadre { margin: 1.8rem 0; padding: 1.1rem 1.3rem; background: var(--jaune-clair); border-radius: var(--radius-md); }
.blog-encadre__k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-deep); margin-bottom: .35rem; }
.blog-encadre p { margin: 0; color: var(--color-ink); line-height: 1.65; }
.blog-encadre p + p { margin-top: .6rem; }

/* La liste d'actions, cochable du regard. */
.blog-checklist { list-style: none; margin: 1.6rem 0; padding: 0; }
.blog-checklist li { position: relative; padding: 0 0 .7rem 1.9rem; line-height: 1.65; }
.blog-checklist li::before { content: ''; position: absolute; left: 0; top: .42em; width: 11px; height: 6px; border-left: 2.5px solid var(--acc-deep); border-bottom: 2.5px solid var(--acc-deep); transform: rotate(-45deg); }

/* Le calcul pose ligne a ligne. */
.blog-calcul { margin: 1.8rem 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; background: #fff; }
.blog-calcul__k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .6rem; }
.blog-calcul ul { list-style: none; margin: 0; padding: 0; }
.blog-calcul li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--color-line); font-size: .95rem; }
.blog-calcul li:last-of-type { border-bottom: 0; }
.blog-calcul li b { white-space: nowrap; }
.blog-calcul__res { margin: .8rem 0 0; padding-top: .7rem; border-top: 2px solid var(--acc-deep); font-weight: 700; color: var(--color-ink); display: flex; justify-content: space-between; gap: 1rem; }

/* Lexique : le composant glossaire adapte a la charte compost. */
.gl-alpha { top: calc(var(--gr-hauteur, 62px) + 72px); }
.gl-hero .kicker { color: var(--jaune); }
.gl-hero .em { font-style: normal; color: var(--jaune); }
.gl-letter { font-size: 26px; font-weight: 800; color: var(--acc-deep); border-bottom: 2px solid var(--color-line); padding-bottom: .3rem; margin: 2.4rem 0 .4rem; scroll-margin-top: var(--ancre-decalage, 190px); }
.gl-entry { scroll-margin-top: var(--ancre-decalage, 190px); }
.gl-entry__term { font-weight: 700; }
.gl-entry__def { color: var(--color-ink); line-height: 1.7; }
.gl-entry__va { margin: .5rem 0 0; font-size: .88rem; color: var(--color-muted); }
.gl-entry__va a { color: var(--acc-deep); font-weight: 600; }
.gl-entry__go { margin: .5rem 0 0; font-size: .9rem; }
.gl-entry__go a { color: var(--acc-deep); font-weight: 600; }
.gl-entry__go a:hover, .gl-entry__va a:hover { text-decoration: underline; }
.gl-sec { background: var(--color-bg-soft); }

/* Tableaux d'article : la legende s'ecrasait en colonne etroite et les cellules
   etaient comprimees par la largeur de la colonne de texte. */
.blog-article table > caption { display: block; width: auto; caption-side: top; padding: 0 0 .55rem; font-size: .84rem; line-height: 1.5; color: var(--color-muted); text-align: left; }
.blog-article table > thead, .blog-article table > tbody { min-width: 560px; }
.blog-article th, .blog-article td { padding: .6rem .75rem; }
.blog-article td { hyphens: auto; }
@media (min-width: 1100px) {
  /* le tableau respire au-dela de la colonne de texte, la ou la place existe */
  .blog-article > table { width: calc(100% + 5.5rem); margin-left: -2.75rem; }
  .blog-article > table > thead, .blog-article > table > tbody { min-width: 640px; }
}

/* La grille texte + sommaire a besoin de 1040 px : le plafond de 760 px heritee
   de la version sans sommaire ecrasait la colonne de lecture a 473 px. */
@media (min-width: 1100px) {
  .blog-article { max-width: 1040px; }
}

/* Le bandeau de chiffres etait coupe sur telephone : le ruban gardait sa largeur
   de contenu et ses cartes leur largeur minimale, si bien que la 3e sortait de
   l'ecran et que son compteur restait a zero, faute d'etre observe. */
@media (max-width: 900px) {
  /* le ruban est tantot flex (carrousel), tantot grid (animation reduite) :
     on force la colonne unique dans les deux cas, avec une specificite suffisante
     pour passer devant les largeurs fixes heritees du carrousel. */
  .pv.pv--bandeau .pv__ruban { display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; gap: .7rem; transform: none; }
  .pv.pv--bandeau .pv__c { width: auto; min-width: 0; max-width: 100%; flex: 1 1 auto; margin: 0; box-sizing: border-box; }
  .pv.pv--bandeau .pv__in, .pv.pv--bandeau .pv__bande { max-width: 100%; overflow-x: clip; }
  .pv.pv--bandeau .pv__l { overflow-wrap: anywhere; }
}

/* Les menus deroulants de l'en-tete passaient SOUS les barres collantes des pages
   (filtres du blog, index du lexique, ancres produit, sommaires) : l'en-tete etait
   a 50 quand ces barres montent jusqu'a 90. On le place au-dessus d'elles, tout en
   restant sous la glissiere de groupe (130) et les surcouches. */
.site-header { z-index: 120; }
.mobile-menu { z-index: 140; }

/* Le signe du chiffre (le + de 500+, le moins de -50 %) doit porter la meme
   couleur que le chiffre lui-meme : il en fait partie. */
.pv--bandeau .pv__n .pv__k { color: var(--jaune); }

/* Cadrages demandes : montrer les visages et le composteur entier. */
.sector-hero--media .sector-hero__media { background-position: var(--sector-pos, center); }
.photo-break__media img { object-position: var(--photo-pos, center); }

/* ---- La bascule vers Easy to Change ----

   1. La bande de groupe, sur le meme motif que clean et carry : une
      frontiere nette au milieu de la pilule, dont le bord epouse son
      arrondi. A gauche le marron d'Easy to Compost, a droite le bordeaux
      d'Easy to Change : la meme couleur que le voile de transition, pour
      que la bascule et son animation racontent la meme chose. La pilule, elle, garde son curseur blanc.
      La frontiere est ancree sur la pilule et non sur le milieu de la
      fenetre : les deux libelles n'ayant pas la meme largeur, la pilule
      n'est pas exactement centree. Le voile part de son milieu exact et
      deborde jusqu'au bord droit, la bande le rogne. */
.gr-bande { background: #2E2419; overflow: hidden; }
.gr-bande .container { position: relative; z-index: 1; }
.gr-glissiere::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: -7.2px; bottom: -7.2px; width: 100vw;
  background: #66333C; border-radius: 999px 0 0 999px;
}
/* Les deux moities sont desormais sombres : les libelles passent au blanc
   des deux cotes. Seul le libelle actif, pose sur le curseur blanc de la
   pilule, garde la couleur de sa marque. */
.gr-bande__fonction:last-child { color: rgba(255, 255, 255, .92); }
.gr-glissiere__o:last-child { color: rgba(255, 255, 255, .92); }
.gr-glissiere:hover .gr-glissiere__o:not(.est-actif):last-child { color: #fff; }
.gr-glissiere__o:last-child.est-actif { color: #66333C; }

/*  2. L'animation de depart prend les couleurs de la destination : on
       s'en va chez Easy to Change, donc fond rose et logo bordeaux.
       Le SVG etant servi en blanc, on le reteint par masquage. */
/* memes proportions que les <img> d'origine : les points sont carres,
   le mot suit le viewBox de son fichier (868 x 129) */
.gr-transition--change .gr-t-pt { width: 10.4%; aspect-ratio: 1; animation: gr-t-charge .85s ease-in-out infinite; }
.gr-transition--change .gr-t-pt:nth-child(2) { animation-delay: .14s; }
.gr-transition--change .gr-t-pt--3 { width: 9.7%; animation-delay: .28s; }
.gr-transition--change .gr-t-mot { width: 100%; aspect-ratio: 871.02 / 120.29; display: block; }
.gr-t-masque {
  display: block;
  background: #FFE6EA;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* L'invitation clignotante etait ecrite en blanc dans ses images-cles :
   une animation l'emporte sur toute regle de couleur, et le libelle de
   droite redevenait invisible sur le rose. Le cote change a donc sa
   propre animation, dans le bordeaux de sa marque. */
@keyframes gr-invite-change {
  0%, 86%, 100% { color: rgba(255, 255, 255, .92); }
  92% { color: #fff; }
}
.gr-glissiere__o:not(.est-actif):last-child { animation-name: gr-invite-change; }

/* Le fond translucide blanc de la pilule ne se voyait plus sur le rose :
   le bouton semblait disparaitre et rien n'indiquait qu'un basculement
   etait possible. Un degrade coupe en deux creait en revanche une
   demarcation en plein milieu du bouton. On garde donc un fond uni et
   c'est un lisere continu, dans le bordeaux d'Easy to Change, qui
   dessine le contour : il se lit sur le rose, et a gauche le curseur
   blanc suffit deja a montrer ou l'on est. */
.gr-glissiere {
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 1px rgba(102, 51, 60, .28);
}
.gr-glissiere:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 0 0 1px rgba(102, 51, 60, .45);
}

/* ---- La page des etudes de cas ----
   Une seule etude tenait dans une carte centree de 820 px. Elles sont
   trois : la grille les met de front sur grand ecran, l'une sous
   l'autre sur telephone, sans les retrecir en vignettes illisibles. */
.cases-grid { display: grid; gap: 1.4rem; max-width: 1120px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cases-grid .case--lien { max-width: none; margin-inline: 0; height: 100%; display: flex; flex-direction: column; }
.cases-grid .case__att { flex: 1 1 auto; }
.cases-grid .case__stats { gap: .9rem 1.4rem; flex-wrap: wrap; }
.cases-grid .case__n { font-size: 1.3rem; }

/* Les references clients portaient des pictogrammes decoratifs sans
   rapport : une croix pour un gazier, une horloge pour une enseigne de
   bricolage. Un nom se lit mieux seul, groupe par secteur. */
.refs { max-width: 1000px; margin-inline: auto; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.refs__col { background: #fff; border: 1px solid var(--color-line, #E3D9BE); border-radius: 16px; padding: 1.15rem 1.3rem; }
.refs__t { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-deep, #55402F); margin-bottom: .55rem; }
.refs__l { margin: 0; padding: 0; list-style: none; }
.refs__l li { padding: .28rem 0; border-top: 1px solid var(--color-line, #E3D9BE); font-size: .95rem; }
.refs__l li:first-child { border-top: 0; }

/* Sur la page des etudes de cas, le bandeau de logos defilait : au repos
   il coupait un logo au bord de l'ecran. Une rangee fixe, centree, se lit
   mieux et ne bouge pas sous l'oeil du lecteur. */
.logos-fixes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem 3rem; margin: 0 auto 2.6rem; max-width: 900px; }
.logos-fixes img { height: 30px; width: auto; object-fit: contain; opacity: .75; filter: grayscale(1); }

/* Les photos d'etude de cas touchaient le bloc suivant : on leur redonne
   de l'air, et la legende de credit reste solidaire de son image. */
.photo-break { margin-block: clamp(1.6rem, 4vw, 3rem) clamp(2.4rem, 6vw, 4rem); }
.photo-break + section, .photo-break + .rp-section { margin-top: clamp(.8rem, 2vw, 1.6rem); }
figure.photo-break figcaption { margin-top: .7rem; }

/* ---- Le calage des ancres ----
   Deux reglages se cumulaient : un scroll-padding-top de 5,5 rem sur html
   ET un scroll-margin-top de 176 px sur les cibles, soit 264 px de recul
   pour des barres collantes qui n'en occupent que 178. Le titre vise
   arrivait 86 px trop bas, avec un trou blanc au-dessus.
   Une seule source de verite desormais : --ancre-decalage, mesure par
   motion.js sur les barres reellement collantes de la page. Le repli
   couvre le cas ou le script ne s'est pas encore execute. */
html { scroll-padding-top: 0; }
:target { scroll-margin-top: var(--ancre-decalage, 190px); }
[id] { scroll-margin-top: var(--ancre-decalage, 190px); }

/* ---- L'encart d'etude de cas sur petit ecran ----
   Le titre de section est pose en absolu par-dessus la scene : sur grand
   ecran il coiffe la photo, le contenu de la carte restant cale en bas.
   Sur telephone, la carte se remplit (titre, quatre chiffres, lien) et
   remonte jusqu'a passer sous le titre absolu : les deux se chevauchaient,
   illisibles. En dessous de 900 px, le titre reprend sa place dans le flux,
   au-dessus de la photo. */
@media (max-width: 900px) {
  /* le selecteur reprend .cs__scene : la regle qui pose le titre en absolu
     est ecrite ainsi, et une simple classe ne fait pas le poids */
  .cs__scene .cs__tete {
    position: static;
    width: auto;
    padding: clamp(1.4rem, 4vw, 2rem) clamp(1.2rem, 4vw, 2rem) 0;
    margin-bottom: clamp(1rem, 3vw, 1.6rem);
    pointer-events: auto;
  }
  .cs__scene { padding-bottom: 0; }
  .vd__in { justify-content: flex-end; padding-top: clamp(1.6rem, 5vw, 2.6rem); }
}

/* ---- ESSAI : bandeau compost en jaune, ecriture marron ----
   Variante demandee pour comparaison. Pour revenir en arriere, supprimer
   ce bloc entier : le reglage precedent (moitie gauche marron, libelles
   blancs) reprend la main tout seul. */
.gr-bande { background: #E9D985; }
.gr-bande__fonction:first-child { color: #2E2419; }
.gr-glissiere__o:first-child { color: rgba(46, 36, 25, .78); }
.gr-glissiere__o:first-child.est-actif { color: #2E2419; }
.gr-glissiere { background: rgba(46, 36, 25, .10); box-shadow: 0 0 0 1px rgba(46, 36, 25, .16); }
.gr-glissiere:hover { background: rgba(46, 36, 25, .16); }
@keyframes gr-invite {
  0%, 86%, 100% { color: rgba(46, 36, 25, .78); }
  92% { color: #2E2419; }
}

/* ---- La glissiere doit se voir, et s'annoncer ----
   Le rail etait presque transparent : rien ne disait que le bouton
   coulisse. On le rend franchement visible (blanc translucide + lisere),
   et on invite au geste par un leger va-et-vient du curseur.
   L'animation porte sur « left », jamais sur « transform » : c'est
   transform qui porte la bascule et le survol, l'animer les casserait. */
.gr-glissiere {
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 1px 3px rgba(46, 36, 25, .12);
}
.gr-glissiere:hover { background: rgba(255, 255, 255, .7); }
.gr-glissiere__curseur { box-shadow: 0 1px 4px rgba(46, 36, 25, .28); }
/* le clin d'oeil s'arrete des que la personne s'en approche */
.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; }
}

/* 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; }
}