/* Finitions fluides : boutons, verre discret et mouvements progressifs. */
:root { --ease-fluid: cubic-bezier(.22,1,.36,1); }
.solution-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
:root .btn { border-radius: 999px; min-height: 48px; transition: transform .3s var(--ease-fluid),box-shadow .3s var(--ease-fluid),background-color .25s; justify-content: center; }
:root .btn.btn-devis { background: var(--petroleum); color: white; border: 1px solid #ffffff70; }
:root .btn.btn-more { background: var(--lime); color: var(--petroleum); border: 1px solid var(--lime); }
:root .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #002f4528; }
:root .btn:active { transform: scale(.97); }
.solution-actions .btn { font-size: 14px; padding: 13px 23px; text-decoration: none; }
.home-page .solution-body .solution-actions { margin-top: 20px; }
.home-page .solution, .needs-grid>a, .steps article, .trust-home { transition: opacity .7s var(--ease-fluid),transform .7s var(--ease-fluid); }
.motion-pending { opacity: 0; transform: translateY(24px); }
.home-page .solution { border-radius: 24px; overflow: hidden; box-shadow: 0 12px 38px #002f4510; }
.home-page .solution .solution-image, .home-page .solution:nth-child(even) .solution-image,
.home-page .solution .solution-body, .home-page .solution:nth-child(even) .solution-body,
[data-theme="dark"] .home-page .solution .solution-body, [data-theme="dark"] .home-page .solution .solution-image { border-radius: 0; }
.solution-image img, .gallery-photo img, .habitat-photos img { transition: transform .7s var(--ease-fluid); }
@media(hover:hover) { .solution-image:hover img, .gallery-photo:hover img, .habitat-photos a:hover img { transform: scale(1.025); } .needs-grid>a:hover { transform: translateY(-4px); } }
.site-header, [data-theme="dark"] .site-header { backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 1px 18px #00344a0b; }
.site-drawer { background: linear-gradient(155deg,rgba(var(--petroleum-rgb),.96),rgba(var(--petroleum-rgb),.89)); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border-radius: 0 28px 28px 0; }
.drawer-close, .site-header .header .menu-toggle, .theme-toggle { transition: background-color .25s,transform .3s var(--ease-fluid); }
.home-page .trust-home>.text-panel, .contact .contact-shell, .needs-grid>a, [data-theme="dark"] .needs-grid>a { border-radius: 24px; }
.detail-hero .intro { max-width: 600px; }
.pro-banner { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 24px; align-items: center; border-radius: 24px; }
.pro-banner .solution-actions { grid-column: 2; margin-top: 0; }
.gallery-zoom::before, .habitat-photos figure>a>span::before { content: '+'; font-size: 22px; }
.home-shortcuts a { transition: background-color .3s var(--ease-fluid),color .3s; }
.home-shortcuts a>b:empty, .needs-grid a>b:empty { display: none; }
.home-shortcuts a { grid-template-columns: 1fr; }
@media(max-width:600px) {
  .solution-actions { gap: 10px; width: 100%; }
  .solution-actions .btn { flex: 1 1 140px; font-size: 13px; padding: 12px 17px; }
  .pro-banner { grid-template-columns: 1fr; }
  .pro-banner .solution-actions { grid-column: 1; }
  .pro-banner .pro-thumb { width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 16px; }
}
@media(prefers-reduced-motion:reduce) { .motion-pending { opacity: 1; transform: none; } *,*::before,*::after { animation: none!important; transition: none!important; } }

/* Les quatre visuels se fondent dans la surface pétrole, comme la bannière. */
.home-page .solution-grid .solution { position: relative; isolation: isolate; min-height: 390px; background: var(--petroleum); }
.home-page .solution-grid .solution-image { position: absolute; inset: 0 auto 0 0; width: 62%; height: 100%; z-index: -1; overflow: hidden; mask-image: linear-gradient(90deg,#000 45%,transparent 100%); -webkit-mask-image: linear-gradient(90deg,#000 45%,transparent 100%); }
.home-page .solution-grid .solution-image img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.home-page .solution-grid .solution:nth-child(even) .solution-image { inset: 0 0 0 auto; mask-image: linear-gradient(270deg,#000 45%,transparent 100%); -webkit-mask-image: linear-gradient(270deg,#000 45%,transparent 100%); }
.home-page .solution-grid .solution-body, [data-theme="dark"] .home-page .solution-grid .solution-body { grid-column: 2; background: transparent; padding: 42px 38px 42px 20px; }
.home-page .solution-grid .solution:nth-child(even) .solution-body { grid-column: 1; padding: 42px 20px 42px 38px; }
.home-page .solution-grid .solution-image>span { display: none; }
@media(max-width:760px) {
 .home-page .solution-grid .solution { display: flex; flex-direction: column; min-height: 0; }
 .home-page .solution-grid .solution-image, .home-page .solution-grid .solution:nth-child(even) .solution-image { position: relative; inset: auto; width: 100%; height: 290px; order: 0; flex-shrink: 0; mask-image: linear-gradient(#000 55%,transparent 100%); -webkit-mask-image: linear-gradient(#000 55%,transparent 100%); }
 .home-page .solution-grid .solution-body, .home-page .solution-grid .solution:nth-child(even) .solution-body, [data-theme="dark"] .home-page .solution-grid .solution-body { padding: 0 28px 32px; margin-top: -12px; }
}

/* En-tête compact : la surface se réduit sans déplacer le contenu de la page. */
:root .site-header { --header-size: 112px; height: 112px; isolation: isolate; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; pointer-events: none; }
:root .site-header::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--header-size); z-index: -1; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--petroleum-border); transition: height .35s var(--ease-fluid),background-color .35s,box-shadow .35s; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
:root[data-theme="dark"] .site-header::before { background: rgba(36,39,43,.94); }
:root .site-header .header { height: var(--header-size); min-height: 0; transition: height .35s var(--ease-fluid); }
:root .site-header .header>* { pointer-events: auto; }
:root .site-header .header .brand { width: 180px; transform: none; opacity: 1; }
:root .site-header .header .brand img { width: 100%; height: 100px!important; transition: height .35s var(--ease-fluid); }
:root.is-scrolled .site-header { --header-size: 72px; }
:root.is-scrolled .site-header::before { background: rgba(255,255,255,.55); box-shadow: 0 6px 24px #002f4510; }
:root[data-theme="dark"].is-scrolled .site-header::before { background: rgba(36,39,43,.5); }
:root.is-scrolled .site-header .header .brand img { height: 64px!important; }
:root .site-header .header .menu-toggle, :root .site-header .header .theme-toggle { background: rgba(255,255,255,.84); color: var(--petroleum); }
:root[data-theme="dark"] .site-header .header .menu-toggle, :root[data-theme="dark"] .site-header .header .theme-toggle { background: rgba(0,76,108,.88); color: white; }
:root .site-header .site-drawer { pointer-events: auto; }
html { scroll-padding-top: 90px; }
@media(max-width:600px) {
 :root .site-header { --header-size: 92px; height: 92px; }
 :root .site-header .header .brand { width: 140px; }
 :root .site-header .header .brand img { height: 82px!important; }
 :root.is-scrolled .site-header { --header-size: 64px; }
 :root.is-scrolled .site-header .header .brand img { height: 56px!important; }
 html { scroll-padding-top: 80px; }
}
@media(prefers-reduced-motion:reduce) { :root .site-header::before, :root .site-header .header, :root .site-header .header .brand img { transition: none; } }

/* Réglage de lecture, à côté du thème, sans agrandir la barre de navigation. */
.site-header .header .header-tools { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-self: end; gap: 12px; pointer-events: auto; }
.text-size-control { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--petroleum-border); border-radius: 999px; background: rgba(255,255,255,.85); }
.text-size-control button { width: 34px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--petroleum); font: inherit; font-weight: 700; cursor: pointer; }
.text-size-control button:nth-child(1) { font-size: 13px; }
.text-size-control button:nth-child(2) { font-size: 17px; }
.text-size-control button:nth-child(3) { font-size: 21px; }
.text-size-control button[aria-pressed="true"] { background: var(--lime); }
.text-size-control button:focus-visible { outline: 2px solid var(--petroleum); outline-offset: 2px; }
[data-theme="dark"] .text-size-control { background: var(--petroleum); border-color: #ffffff45; }
[data-theme="dark"] .text-size-control button { color: white; }
[data-theme="dark"] .text-size-control button[aria-pressed="true"] { color: var(--petroleum); }
.home-shortcuts a { min-height: 98px; padding: 16px 20px; gap: 6px; }
.home-shortcuts strong { font-size: 14px; }
@media(max-width:600px) {
 .site-header .header .header-tools { gap: 6px; }
 .text-size-control { padding: 2px; }
 .text-size-control button { width: 28px; height: 32px; }
 :root .site-header .header .brand { width: 110px; }
 :root .site-header .header { grid-template-columns: auto 1fr auto; gap: 6px; padding-left: 10px; padding-right: 10px; }
 .site-header .header .menu-toggle { padding: 8px; gap: 4px; }
 .home-shortcuts a { min-height: 80px; padding: 12px; }
}
@media(max-width:380px) { :root .site-header .header .brand { width: 86px; } .text-size-control button { width: 25px; } }

.topbar a[href^="tel:"] strong, [data-theme="dark"] .topbar a[href^="tel:"] strong { color: var(--lime); }

/* Brochures commerciales : couvertures complètes et classement par solution. */
.documentation-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.documentation-topics a { padding: 11px 18px; border: 1px solid var(--petroleum-border); border-radius: 999px; color: var(--petroleum); background: var(--lime); font-size: 14px; font-weight: 700; }
.documentation-body { padding-top: 40px; padding-bottom: 60px; }
.documentation-section { margin-bottom: 54px; scroll-margin-top: 95px; }
.documentation-section>h2 { margin-bottom: 24px; font-size: clamp(25px,3vw,34px); color: var(--petroleum); }
.documentation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.documentation-card { display: grid; grid-template-columns: 38% minmax(0,1fr); overflow: hidden; background: var(--petroleum); border: 1px solid var(--petroleum-border); border-radius: 24px; color: white; }
.documentation-cover { display: flex; align-items: center; justify-content: center; padding: 18px; background: #f1f5f4; }
.documentation-cover img { display: block; width: 100%; height: 260px; object-fit: contain; filter: drop-shadow(0 5px 8px #002f4520); }
.documentation-copy { padding: 26px 22px; display: flex; flex-direction: column; align-items: flex-start; }
.documentation-copy h3, [data-theme="dark"] .documentation-copy h3 { color: var(--lime); font-size: 25px; margin-bottom: 12px; }
.documentation-copy .category { color: var(--lime); font-size: 10px; letter-spacing: 1.4px; margin-bottom: 12px; }
.documentation-copy>p { color: #edf4f5; font-size: 14px; line-height: 1.65; }
.documentation-copy .documentation-meta { color: #d1e2e7; font-size: 12px; margin-top: 14px; }
.documentation-copy .solution-actions { margin-top: auto; padding-top: 20px; gap: 8px; }
.documentation-copy .btn { padding: 10px 16px; min-height: 42px; font-size: 12px; }
.documentation-help { margin-top: 20px; }
[data-theme="dark"] .documentation-section>h2 { color: var(--lime); }
@media(max-width:1000px) { .documentation-grid { grid-template-columns: 1fr; } .documentation-cover img { height: 240px; } }
@media(max-width:480px) { .documentation-card { grid-template-columns: 1fr; } .documentation-cover img { height: 230px; } .documentation-copy { padding: 24px; } .documentation-topics a { font-size: 12px; } }

.documentation-card { position: relative; }
.documentation-anchor { position: absolute; top: 0; scroll-margin-top: 95px; }

/* Catalogue et fiches produits : lecture claire, surfaces pétrole et accents anis. */
.products-body, .product-body { padding-top: 40px; padding-bottom: 64px; }
.product-hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 60px; align-items: center; }
.product-hero-grid .intro { color: var(--petroleum); }
.product-visual { margin: 0; padding: 24px; border: 1px solid var(--petroleum-border); border-radius: 24px; background: #f1f5f4; }
.product-visual img { display: block; width: 100%; height: 370px; object-fit: contain; }
.product-visual figcaption { font-size: 11px; line-height: 1.6; color: #41565f; margin-top: 14px; }
.product-body { max-width: 1020px; display: grid; gap: 28px; }
.product-body .text-panel { margin: 0; border-radius: 24px; }
.product-body h2 { font-size: clamp(24px,3vw,32px); line-height: 1.25; }
.product-body h3 { margin-top: 24px; margin-bottom: 12px; }
.product-benefits { padding: 28px 32px; border-radius: 24px; background: var(--lime); color: var(--petroleum); }
.product-benefits h2, [data-theme="dark"] .product-benefits h2 { color: var(--petroleum); }
.product-benefits ul { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.product-table-wrap { overflow-x: auto; margin-top: 24px; }
.product-specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.product-specs caption { text-align: left; padding-bottom: 14px; font-size: 13px; }
.product-specs th, .product-specs td { padding: 15px 18px; border-bottom: 1px solid #ffffff35; text-align: left; vertical-align: top; }
.product-specs th { width: 40%; font-weight: 700; color: var(--lime); }
.product-specs td { color: white; }
.product-documents { list-style: none; padding: 0; }
.product-documents li { padding: 18px 0; border-bottom: 1px solid #ffffff35; }
.product-documents li>a { color: var(--lime); font-weight: 700; }
.product-documents li>span { display: block; margin-top: 8px; font-size: 13px; }
.product-source-note { font-size: 13px; margin-top: 22px; }
.product-related>div { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.product-related>div>a { padding: 12px 20px; color: var(--petroleum); background: var(--lime); border-radius: 999px; font-weight: 700; }
.product-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 24px; border: 1px solid var(--petroleum-border); border-radius: 24px; background: var(--petroleum); }
.product-filters label { flex: 1 1 220px; display: grid; gap: 8px; color: white; font-size: 13px; font-weight: 700; }
.product-filters :is(input,select) { display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px solid #ffffff50; border-radius: 12px; background: #fff; color: #004c6c; font: inherit; }
.product-filters button { align-self: center; color: var(--lime); padding: 12px; }
.product-results { margin: 22px 0; font-size: 14px; }
.product-family { margin: 45px 0 60px; scroll-margin-top: 95px; }
.product-family>h2 { margin-bottom: 26px; font-size: clamp(26px,3vw,36px); }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.product-card { overflow: hidden; border: 1px solid var(--petroleum-border); border-radius: 24px; background: var(--petroleum); display: flex; flex-direction: column; }
.product-card-image { display: block; padding: 22px; background: #f1f5f4; }
.product-card-image img { display: block; width: 100%; height: 235px; object-fit: contain; transition: transform .3s; }
.product-card-image:hover img { transform: scale(1.025); }
.product-card-copy { padding: 24px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.product-card-copy .category { font-size: 10px; letter-spacing: 1.2px; color: var(--lime); margin-bottom: 12px; }
.product-card-copy h3, .product-card-copy h3>a, [data-theme="dark"] .product-card-copy h3 { color: var(--lime); font-size: 24px; line-height: 1.25; }
.product-card-copy>p:not(.category) { color: #edf4f5; font-size: 14px; margin: 14px 0 22px; }
.product-card-copy>.btn { margin-top: auto; font-size: 13px; padding: 12px 20px; }
[data-theme="dark"] .product-hero-grid .intro, [data-theme="dark"] .product-family>h2, [data-theme="dark"] .product-related>h2 { color: var(--lime); }
.product-card[hidden], .product-family[hidden], [data-product-empty][hidden] { display: none!important; }
@media(max-width:1000px) { .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .product-hero-grid { gap: 30px; } }
@media(max-width:760px) { .product-hero-grid { grid-template-columns: 1fr; } .product-visual { max-width: 480px; width: 100%; justify-self: center; } .product-visual img { height: 300px; } }
@media(max-width:540px) { .product-grid { grid-template-columns: 1fr; } .product-benefits { padding: 24px; } .product-specs th,.product-specs td { padding: 12px 8px; } .product-filters { padding: 20px; } }