/* ===== Alyana Solar — main.css ===== */

html { scroll-behavior: smooth; }

/* kill default block-gap margins between top-level layout blocks:
   header ↔ main ↔ footer and between full-width page sections */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.site-main { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.site-main .wp-block-post-content > * + * { margin-block-start: 0 !important; }
.site-main .wp-block-post-content > *:first-child { margin-block-start: 0 !important; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #F5A623; color: #171004; }
img { max-width: 100%; height: auto; }

/* ---------- Easing tokens ---------- */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Header: transparent over hero, solid when scrolled ---------- */
header.wp-block-template-part { position: absolute; top: 0; left: 0; right: 0; z-index: 999; }
body.admin-bar header.wp-block-template-part { top: 32px; }
.site-header {
  background: transparent !important;
  border-bottom: none;
  transition: background 250ms ease;
}
header.wp-block-template-part { transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease; }
header.wp-block-template-part.is-fixed {
  position: fixed;
  background: rgba(34, 26, 18, 0.95); /* brief 2.1: #221A12 a 95% pour que le logo dore et le menu restent lisibles au-dessus des sections claires */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.35);
}
/* backdrop-filter/transform create a containing block that traps the
   fullscreen mobile menu inside the header bar — lift them while open */
header.wp-block-template-part:has(.is-menu-open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none;
}
header.wp-block-template-part.is-hidden { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part { transition: none; }
}
.header-logo img { width: auto !important; height: 78px !important; transition: height 300ms ease; }
.site-footer .wp-block-site-logo img { width: auto !important; height: 68px !important; }
.header-nav a { position: relative; padding: 0.35rem 0; transition: color .25s ease; }
.header-nav a:hover { color: #F5A623 !important; }
/* desktop: float the dropdown chevron out of flow so all labels are evenly spaced */
@media (min-width: 900px) {
  .header-nav .wp-block-navigation-item.has-child { position: relative; }
  .header-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding-right: 0 !important; }
  .header-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin: 0 0 0 4px !important; pointer-events: none;
  }
}
.header-nav .wp-block-navigation__submenu-container {
  background: rgba(23, 16, 4, 0.50) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(245,166,35,.15) !important;
  border-radius: 14px !important;
  padding: 0.4rem !important;
  min-width: 240px !important;
  overflow: hidden;
}
.header-nav .wp-block-navigation__submenu-container li,
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  background: transparent !important;
}
.header-nav .wp-block-navigation__submenu-container a { border-radius: 9px; padding: 0.55rem 0.8rem !important; background: transparent !important; }
.header-nav .wp-block-navigation__submenu-container a:hover { background: rgba(245,166,35,.12) !important; }
.header-cta .wp-block-button__link { font-size: 0.9rem; padding: 0.65rem 1.4rem; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform 160ms var(--ease-out-strong), box-shadow 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; }
.wp-block-button__link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(245, 166, 35, 0.55); }
  .wp-block-button__link:hover:active { transform: scale(0.97); }
}
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, summary:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: 2px;
  border-radius: 4px;
}
.is-style-outline > .wp-block-button__link { border: 1.5px solid rgba(255,255,255,.35); color: #fff; background: transparent; }
.is-style-outline > .wp-block-button__link:hover { border-color: #F5A623; color: #F5A623; box-shadow: none; background: rgba(245,166,35,.06); }
.sec-light .is-style-outline > .wp-block-button__link,
.sec-grey .is-style-outline > .wp-block-button__link { border-color: rgba(27,23,18,.3); color: #1B1712; }
.sec-light .is-style-outline > .wp-block-button__link:hover,
.sec-grey .is-style-outline > .wp-block-button__link:hover { border-color: #D98A0B; color: #D98A0B; }

/* phone button (icon + number) */
.btn-phone .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn-phone svg { flex-shrink: 0; }

/* ---------- Chips / badges ---------- */
.chip.chip-center { display: table; margin-left: auto !important; margin-right: auto !important; }
.chip {
  display: inline-block;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F5A623;
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.35);
}

/* ---------- Cards ---------- */
.as-card {
  background: #fff;
  border: 1px solid #E9E5DD;
  border-radius: 22px;
  padding: 2rem !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .as-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(27, 23, 18, 0.18); border-color: rgba(245,166,35,.5); }
}
.as-card-dark {
  background: #181510;
  border: 1px solid rgba(245, 166, 35, 0.16);
  border-radius: 22px;
  padding: 2rem !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .as-card-dark:hover { transform: translateY(-6px); border-color: rgba(245,166,35,.55); box-shadow: 0 24px 56px -16px rgba(0,0,0,.55); }
}

/* product cards: image zoom */
.product-card { overflow: hidden; padding: 0 !important; }
.product-card figure { margin: 0; overflow: hidden; border-radius: 0; position: relative; aspect-ratio: 3 / 2; }
.product-card figure a { position: absolute; inset: 0; display: block; }
.product-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover img { transform: scale(1.05); }
  .card-body p a { display: inline-block; transition: transform 200ms var(--ease-out-strong); }
  .card-body p a:hover { transform: translateX(4px); }
}
.product-card .card-body { padding: 1.6rem 1.8rem 1.9rem; }

/* ---------- Icon dot ---------- */
.icon-dot {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.3);
  font-size: 1.4rem;
}

/* ---------- Stats ---------- */
.stat-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem) !important; color: #F5A623; line-height: 1.1; margin-bottom: 0.2rem !important; }
.stat-label { font-size: 0.8rem !important; letter-spacing: 0.14em; text-transform: uppercase; opacity: .75; }

/* ---------- Images ---------- */
.img-rounded img, .img-rounded { border-radius: 22px; }

/* ---------- FAQ (details) ---------- */
.faq-item {
  background: #fff;
  border: 1px solid #E9E5DD;
  border-radius: 16px;
  padding: 1.1rem 1.5rem;
  margin-bottom: 0.9rem;
  transition: border-color .3s ease;
}
.faq-item[open] { border-color: rgba(245,166,35,.6); }
.faq-item summary { font-family: 'Sora', sans-serif; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: #F5A623; font-size: 1.5rem; font-weight: 400; transition: transform .3s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin-top: 0.8rem; opacity: .85; }

/* ---------- Footer ---------- */
.site-footer .footer-links a { color: #B8B2A6; text-decoration: none; line-height: 2.1; transition: color .25s ease; }
.site-footer .footer-links a:hover { color: #F5A623; }
.footer-sep { border: none; height: 1px !important; background: rgba(245,166,35,.12) !important; opacity: 1; }
.footer-social { margin-top: 1.1rem; display: flex; gap: 0.6rem; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #F5A623; border: 1px solid rgba(245,166,35,.3);
  background: rgba(245,166,35,.08);
  transition: transform 160ms var(--ease-out-strong), background 220ms ease, color 220ms ease;
}
.footer-social a:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { background: #F5A623; color: #171004; transform: translateY(-2px); }
}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 9999;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #F5A623;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(245, 166, 35, 0.55);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  animation: fab-pulse 2.6s ease-out infinite;
}
.whatsapp-fab svg { fill: #171004; }
.whatsapp-fab:hover { transform: scale(1.1); background: #D98A0B; box-shadow: 0 14px 36px -6px rgba(245, 166, 35, 0.7); }
@keyframes fab-pulse {
  0% { outline: 0 solid rgba(245,166,35,.45); outline-offset: 0; }
  70% { outline: 14px solid rgba(245,166,35,0); }
  100% { outline: 14px solid rgba(245,166,35,0); }
}

/* ---------- Scroll reveal (hidden state only when JS is present) ---------- */
html.has-js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out-strong), transform .6s var(--ease-out-strong); will-change: opacity, transform; }
html.has-js .reveal.in-view { opacity: 1; transform: none; }
html.has-js .reveal.d1 { transition-delay: .1s; }
html.has-js .reveal.d2 { transition-delay: .22s; }
html.has-js .reveal.d3 { transition-delay: .34s; }
html.has-js .reveal.d4 { transition-delay: .46s; }
html.has-js .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .6s var(--ease-out-strong), transform .6s var(--ease-out-strong); }
html.has-js .reveal-left.in-view { opacity: 1; transform: none; }
html.has-js .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .6s var(--ease-out-strong), transform .6s var(--ease-out-strong); }
html.has-js .reveal-right.in-view { opacity: 1; transform: none; }
html.has-js .reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
html.has-js .reveal-zoom.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
  .whatsapp-fab { animation: none; }
  .wp-block-button__link:hover, .as-card:hover, .as-card-dark:hover { transform: none; }
}

/* ---------- Hero: warm amber overlay ---------- */
.hero-solar { position: relative; overflow: hidden; }
.hero-solar .wp-block-cover__image-background { will-change: transform; }

/* hero slideshow layers (crossfade loop) — add <img> tags in .hero-slides */
.hero-slides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}
.hero-slides img.active { opacity: 1; }
/* until initHeroFx moves the mount next to the base image it sits inside the
   text container (z-index 1) and would flash over the overlay; hide it there. */
.wp-block-cover__inner-container > .hero-slides { display: none; }
/* Le texte du hero passe au-dessus de tout ce qui est pose sur la photo. */
.hero-solar .wp-block-cover__inner-container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero-solar .wp-block-cover__image-background, .hero-slides img { transform: none !important; }
}
/* Ombre portee RENFORCEE. Le spotlight peut desormais passer sous le titre et
   decouvrir la photo brute : le blanc y tombe a 1,0-1,2:1 (mesure). Un halo
   sombre dense autour des glyphes est la seule protection qui reste, puisque le
   garde-fou a ete retire a la demande du user. */
.hero-solar h1,
.hero-solar .wp-block-cover__inner-container p:not(.chip) {
  text-shadow:
    0 1px 2px rgba(8, 4, 0, 0.62),
    0 2px 10px rgba(8, 4, 0, 0.55),
    0 0 30px rgba(8, 4, 0, 0.50);
}
/* La pastille est en ambre: sans halo elle disparait sur un ciel clair. */
.hero-solar .chip {
  text-shadow: 0 1px 2px rgba(8, 4, 0, 0.62), 0 0 18px rgba(8, 4, 0, 0.55);
}
.hero-kicker { letter-spacing: .02em; }
/* hero badge (demande client): plus grand sur desktop, et centre sur mobile.
   Le libelle est long: a 12.8px il demandait 375px pour 319 dispo, donc les
   marges auto tombaient a 0 et la pastille prenait toute la largeur en se
   collant a gauche. Reduit sur mobile pour tenir sur une ligne et se centrer,
   comme la pastille de la section CTA avant le footer.
   Scope au hero: les badges de cartes (Recommande, Rendement...) ne bougent pas. */
body.home .hero-solar .chip {
  font-size: 1.05rem !important;
  padding: 0.62rem 1.6rem;
  text-align: center;
}
@media (max-width: 781px) {
  body.home .hero-solar .chip {
    font-size: 0.66rem !important;
    padding: 0.42rem 0.9rem;
    letter-spacing: 0.02em;
  }
}
.hero-solar h1 .amber { color: #EF9F27; }
/* hero H1 line control (brief 1.1). The headline must read as two parts with
   "D'autres non." alone on its own line, in gold.
   Desktop: part 1 needs 1161px at the theme's fluid size but the content column
   is 1140px, so it wrapped. Capped just under that so it always sits on ONE line.
   Mobile: keeping part 1 on one line would need an 18px H1 (measured), which is
   smaller than body copy. Instead the size tracks viewport width so part 1 always
   breaks into two balanced lines, never at a random point, with the gold line
   standing alone underneath. Scoped to the homepage so product heroes are unaffected. */
@media (min-width: 782px) {
  body.home .hero-solar h1 { font-size: min(3.7rem, calc((100vw - 4.5rem) * 0.053)) !important; }
}
@media (max-width: 781px) {
  body.home .hero-solar h1 {
    font-size: clamp(1.6rem, 8.2vw, 2.4rem) !important;
    line-height: 1.17;
    text-wrap: balance;
  }
}

/* warm amber tint on all dark sections */
.sec-dark {
  background: radial-gradient(ellipse 90% 110% at 85% -10%, rgba(214, 128, 20, 0.20), transparent 55%), #171004 !important;
}
/* footer: flat, same base as the CTA's fade-out color — seamless continuation */
.site-footer {
  background: #171004 !important;
}

/* trust bar under hero: white strip with a slow seamless marquee */
.trust-bar {
  border-top: none;
  border-bottom: none; /* brief: fine ligne sous le bandeau retiree */
  background: var(--wp--preset--color--surface, #F6F5F2) !important; /* meme fond que la section grise juste en dessous */
  overflow: hidden;
}
.trust-track { display: flex; width: max-content; }
.trust-inner {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  flex-shrink: 0;
  animation: trust-scroll 34s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .trust-track:hover .trust-inner { animation-play-state: paused; }
}
@keyframes trust-scroll { to { transform: translateX(-100%); } }
.trust-item {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #57504A;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.trust-item .tick { color: #D98A0B; }
@media (prefers-reduced-motion: reduce) {
  .trust-inner { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 0.6rem; }
  .trust-inner[aria-hidden="true"] { display: none; }
  .trust-track { width: 100%; }
}


/* ---------- Misc ---------- */
.text-amber { color: #F5A623 !important; }
.check-list { list-style: none; padding-left: 0 !important; }
.check-list li { padding-left: 1.9rem; position: relative; margin-bottom: 0.65rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #F5A623; font-weight: 700; }

/* ---------- CTA glow ---------- */
.cta-glow { background: radial-gradient(ellipse 65% 95% at 50% -10%, rgba(230, 140, 25, 0.30), transparent 64%), #171004 !important; }

/* ---------- Process steps ---------- */
.step-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.8rem !important; line-height: 1; color: transparent !important; -webkit-text-stroke: 1.5px #F5A623; margin-bottom: 0.6rem !important; }

/* ---------- Stars ---------- */
.stars { color: #F5A623 !important; letter-spacing: 3px; font-size: 1.05rem !important; }

/* header at in-between widths */
@media (max-width: 1180px) {
  .header-nav { font-size: 0.85rem !important; }
  .header-nav .wp-block-navigation__container { gap: 1.1rem; flex-wrap: nowrap; }
  .header-cta .wp-block-button__link { font-size: 0.82rem; padding: 0.55rem 1.1rem; }
}

/* ---------- Polish pass (impeccable / apple-design / emil / ui-ux-pro-max) ---------- */

/* typography: balanced headings, no orphans in prose */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html { overflow-x: clip; }
body { overflow-x: clip; overscroll-behavior-x: none; width: 100%; max-width: 100%; }

/* FAQ: smooth open/close (progressive enhancement, Chrome 131+) */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility 300ms allow-discrete, opacity 300ms ease, block-size 300ms var(--ease-out-strong);
}
.faq-item[open]::details-content { opacity: 1; block-size: auto; }
@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { color: #D98A0B; transition: color 200ms ease; }
}

/* mobile nav hamburger: 44px+ tap target, designed pill, pinned right */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 10px !important;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation__responsive-container-open {
  border: none;
  background: transparent;
  color: #fff;
  transition: transform 160ms var(--ease-out-strong), opacity 200ms ease;
}
.wp-block-navigation__responsive-container-open:active { transform: scale(0.9); }
.wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-close { color: #fff !important; top: 1rem !important; right: 1.1rem !important; }
.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }

/* fullscreen mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  z-index: 10000;
  min-height: 100dvh;
  padding: 2.2rem 1.6rem 1.8rem !important;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(23, 16, 4, 0.62) !important;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  animation: menuOverlayIn .34s ease both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  animation: menuContentIn .42s var(--ease-out-strong) .05s both;
}
@keyframes menuOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes submenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.as-submenu-in { animation: submenuIn .3s var(--ease-out-strong); }

/* submenu parent: label + down-chevron on ONE row, submenu wraps below */
/* label + chevron inline inside the toggle button (chevron moved in via JS);
   label + chevron inline, aligned left with the other menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  display: inline-flex !important; align-items: center; gap: 0.4rem; width: auto !important;
  padding-left: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: inline-flex !important; align-items: center; margin: 0 !important; color: #F5A623;
  transition: transform .25s var(--ease-out-strong);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* mobile menu chrome: logo at top, contact footer at bottom */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important; flex-direction: column; align-items: stretch; min-height: calc(100dvh - 5rem);
}
/* menu chrome hidden on desktop — only shown inside the mobile overlay */
.mm-logo, .mm-foot { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .mm-logo { display: block; text-align: center; margin: 0 0 1.2rem; flex: 0 0 auto; }
.wp-block-navigation__responsive-container.is-menu-open .mm-foot { display: flex; }
.mm-logo img { height: 78px; width: auto; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex: 0 0 auto; width: fit-content; margin-inline: auto; align-items: flex-start !important; gap: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a { text-align: left !important; justify-content: flex-start !important; }
.mm-foot {
  margin-top: auto; padding-top: 1.2rem; flex: 0 0 auto;
  border-top: 1px solid rgba(245, 166, 35, 0.16);
  flex-direction: column; gap: 0.8rem;
}
.mm-cta {
  display: block; text-align: center; text-decoration: none;
  background: #F5A623; color: #171004 !important;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.98rem !important; letter-spacing: 0.01em;
  border-radius: 999px; padding: 0.95rem 1.4rem !important;
  transition: transform 160ms var(--ease-out-strong), background 200ms ease;
}
.mm-cta:active { transform: scale(0.97); }
.mm-contact { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; }
.mm-contact-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 1.2rem; }
.mm-contact a { color: #B8B2A6 !important; font-size: 0.95rem !important; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0 !important; }
.mm-contact a svg { width: 16px; height: 16px; color: #F5A623; flex-shrink: 0; }
.mm-social { display: flex; justify-content: center; gap: 0.55rem; margin-top: 0.15rem; }
.mm-social a {
  display: flex; align-items: center; justify-content: center; padding: 0.4rem;
  color: #F5A623; border: none; background: none;
  transition: transform 160ms var(--ease-out-strong), color 200ms ease;
}
.mm-social a svg { width: 30px !important; height: 30px !important; }
.mm-social a:active { transform: scale(0.9); }
@keyframes menuContentIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.06rem !important; padding: 0.48rem 0 !important; }

/* mobile: collapsed submenus (openSubmenusOnClick) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.06rem !important; font-weight: 500; padding: 0.48rem 0 !important; cursor: pointer;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { transition: transform .25s var(--ease-out-strong); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  order: 3; flex: 1 0 100%;
  border: none !important; background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0.1rem 0 0.35rem 0.9rem !important; min-width: 0 !important;
  position: static !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { font-size: 0.98rem !important; opacity: .8; padding: 0.36rem 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg { transition: transform .25s var(--ease-out-strong); }
.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { animation: none !important; }
}

/* reduced motion: FAQ + micro-interactions fall back to instant/fade */
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
  .card-body p a { transition: none; }
}

/* ---------- Forms (Fluent Forms + Easy Appointments) ---------- */
.form-card {
  background: #fff;
  border: 1px solid #E9E5DD;
  border-radius: 22px;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  box-shadow: 0 18px 44px -22px rgba(27, 23, 18, 0.14);
}
.form-card .ff-el-form-control,
.form-card .ea-standard input[type="text"],
.form-card .ea-standard input[type="email"],
.form-card .ea-standard select,
.form-card .ea-standard textarea {
  width: 100%;
  background: #FBFAF8;
  border: 1px solid #E4DFD6;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #1B1712;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-card .ff-el-form-control:focus,
.form-card .ea-standard input:focus,
.form-card .ea-standard select:focus,
.form-card .ea-standard textarea:focus {
  outline: none;
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.form-card .ff-el-input--label label,
.form-card .ea-standard label {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: #1B1712;
  margin-bottom: 0.35rem;
}
.form-card .ff-el-group { margin-bottom: 1.15rem; }
.form-card .ff-btn-submit {
  background: #F5A623 !important;
  color: #171004 !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.9rem !important;
  cursor: pointer;
  transition: transform 160ms var(--ease-out-strong), background 200ms ease, box-shadow 200ms ease;
}
.form-card .ff-btn-submit:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .form-card .ff-btn-submit:hover { background: #D98A0B !important; transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(245, 166, 35, 0.55); }
}
.form-card .ff-message-success {
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}
/* EA booking widget */
.form-card .ea-standard { font-family: 'Inter', sans-serif; }
.form-card .ea-standard .step { margin-bottom: 1rem; }
.form-card .ui-datepicker { width: 100%; background: #fff; border: 1px solid #E9E5DD; border-radius: 16px; padding: 0.8rem; font-family: 'Inter', sans-serif; }
.form-card .ui-datepicker .ui-datepicker-header { background: transparent; border: none; font-family: 'Sora', sans-serif; }
.form-card .ui-datepicker td a { text-align: center; border-radius: 9px; padding: 0.45rem 0; border: none; background: #F6F5F2; color: #1B1712; }
.form-card .ui-datepicker td a.ui-state-active { background: #F5A623 !important; color: #171004 !important; font-weight: 700; }
.form-card .ui-datepicker td a.ui-state-hover { background: rgba(245, 166, 35, 0.25); }
.form-card .ea-standard .time-value { border-radius: 999px; border: 1px solid #E4DFD6; padding: 0.45rem 1rem; display: inline-block; margin: 0.2rem; cursor: pointer; transition: all 200ms ease; }
.form-card .ea-standard .time-value.selected-time, .form-card .ea-standard .time-value:hover { background: #F5A623; border-color: #F5A623; color: #171004; font-weight: 600; }
.form-card .ea-btn, .form-card .ea-standard .btn.btn-primary, .form-card .ea-submit-form {
  background: #F5A623 !important; color: #171004 !important; border: none !important; border-radius: 999px !important;
  font-family: 'Sora', sans-serif !important; font-weight: 600 !important; padding: 0.8rem 1.8rem !important; cursor: pointer;
}

/* ---------- Reviews wall: fixed-height vertical auto-scroll ---------- */
.reviews-wall {
  position: relative;
  height: 480px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
/* real mask instead of grey overlays: cards fade to nothing at the edges,
   nothing covers the view, no half-visible slivers */
.reviews-wall {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.reviews-col { overflow: hidden; }
.reviews-track { display: flex; flex-direction: column; animation: reviews-up 44s linear infinite; will-change: transform; }
.reviews-col:nth-child(1) .reviews-track { animation-duration: 38s; }
.reviews-col:nth-child(2) .reviews-track { animation-duration: 50s; }
.reviews-col:nth-child(3) .reviews-track { animation-duration: 43s; }
.reviews-set, .reviews-dup { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 1.25rem; }
@keyframes reviews-up { to { transform: translateY(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .reviews-wall:hover .reviews-track { animation-play-state: paused; }
}
.review-card {
  background: #fff;
  border: 1px solid #E9E5DD;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
}
.review-card .stars { margin-bottom: 0.5rem; }
.review-quote { font-size: 0.95rem; line-height: 1.65; margin-bottom: 0.8rem; }
.review-author { font-size: 0.85rem; }
.review-author span { color: #6E675C; }
@media (max-width: 781px) {
  .reviews-wall { grid-template-columns: 1fr; height: 430px; }
  .reviews-col:nth-child(2), .reviews-col:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none !important; }
  .reviews-dup { display: none; }
  .reviews-wall { height: auto; overflow: visible; }
  .reviews-wall { -webkit-mask-image: none; mask-image: none; }
}

/* Fluent Forms date picker (flatpickr) in brand colors */
.flatpickr-calendar { border-radius: 16px; border: 1px solid #E9E5DD; box-shadow: 0 18px 44px -18px rgba(27, 23, 18, 0.25); font-family: 'Inter', sans-serif; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #F5A623; border-color: #F5A623; color: #171004; font-weight: 700; }
.flatpickr-day:hover { background: rgba(245, 166, 35, 0.18); border-color: transparent; }
.flatpickr-day.today { border-color: #F5A623; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { font-family: 'Sora', sans-serif; }

/* mobile tweaks */
@media (max-width: 781px) {
  /* tight corner gutters on mobile */
  .site-header { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
  /* burger far left — logo perfectly centered — CTA far right (3-col grid) */
  .site-header .alignwide { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header .wp-block-navigation { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -10px; /* cancel the burger's tap padding so its icon aligns optically */ }
  .header-logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .header-cta { display: none !important; }
  .header-logo img { height: 70px !important; }
  /* au scroll sur mobile, le logo reprend sa taille d'origine */
  header.wp-block-template-part.is-fixed .header-logo img { height: 58px !important; }
  .site-header .alignwide { justify-content: space-between; gap: 0.7rem; }
  .as-card:not(.product-card), .as-card-dark { padding: 1.5rem !important; }
  .product-card { padding: 0 !important; }
  .product-card figure { aspect-ratio: 16 / 10; }
  .whatsapp-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .hero-solar { min-height: 86vh !important; padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
  /* inner pages: hero fits its own content on mobile (home keeps the tall one).
     min-height:0 lets short heroes stay compact; padding-top clears the floating
     header so long content (product pages) can never collide with the logo */
  body:not(.home) .hero-solar { min-height: 0 !important; padding-top: 6.8rem !important; padding-bottom: 2.8rem !important; }
  body:not(.home) .site-main .wp-block-post-content > .wp-block-group:first-child { padding-top: 6.8rem !important; padding-bottom: 3.2rem !important; }
  .step-num { font-size: 2.2rem !important; }
  .site-main .wp-block-columns { gap: 1.25rem; }
  h1 { letter-spacing: -0.015em; }
}

/* small phones: full-width CTAs in hero + CTA section */
@media (max-width: 520px) {
  .hero-solar .wp-block-buttons, .cta-glow .wp-block-buttons { width: 100%; }
  .hero-solar .wp-block-button, .cta-glow .wp-block-button { width: 100%; }
  .hero-solar .wp-block-button__link, .cta-glow .wp-block-button__link { display: flex; width: 100%; justify-content: center; }
  .card-body { padding: 1.3rem 1.4rem 1.6rem !important; }
  .faq-item { padding: 0.9rem 1.1rem; }
}

/* --- Pricing tiers (SolarRoof configurations) --- */
.price-from { font-family:'Inter',sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#9a917f; margin:.5rem 0 0; }
.as-card-dark .price-from { color:#B8B2A6; }
.price-tag { font-family:'Sora',sans-serif; font-weight:700; font-size:1.7rem; line-height:1.1; color:#171004; margin:.1rem 0 .5rem; }
.as-card-dark .price-tag { color:#fff; }
.price-config { font-family:'Inter',sans-serif; font-size:.82rem; color:#6f6656; margin:0 0 .9rem; }
.as-card-dark .price-config { color:#B8B2A6; }
/* --- Per-configuration spec sheet (SolarRoof tiers) --- */
.tier-spec { margin:0 0 1.15rem; }
.tier-spec > div { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.52rem 0; border-bottom:1px solid rgba(23,16,4,.09); }
.tier-spec > div:first-child { border-top:1px solid rgba(23,16,4,.09); }
.as-card-dark .tier-spec > div { border-bottom-color:rgba(255,255,255,.11); }
.as-card-dark .tier-spec > div:first-child { border-top-color:rgba(255,255,255,.11); }
.tier-spec dt { font-family:'Inter',sans-serif; font-size:.8rem; color:#6f6656; }
.as-card-dark .tier-spec dt { color:#B8B2A6; }
.tier-spec dd { margin:0; font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; line-height:1; color:#171004; letter-spacing:-.01em; white-space:nowrap; }
.as-card-dark .tier-spec dd { color:#fff; }
/* mobile hero spacing */
@media (max-width: 781px) {
  .hero-solar { padding-top: 6rem !important; padding-bottom: 1.5rem !important; }
  .hero-solar .wp-block-spacer { height: 0 !important; }
  .hero-solar .wp-block-buttons { margin-top: 0.9rem !important; }
}

/* Mobile hero: portrait art-direction */
@media (max-width: 781px) {
  /* La photo mobile n'est plus un background-image CSS mais la vraie balise <img>
     (source portrait posee par le JS): c'est la seule facon d'avoir le parallaxe. */
}

/* Product hero: keyword line inside the H1, visually secondary */
.h1-sub { display:block; font-family:'Inter',sans-serif; font-size:.36em; font-weight:500; line-height:1.3; letter-spacing:0; color:#E8E2D8; opacity:.92; margin-top:.55rem; }
@media (max-width:781px){ .h1-sub { font-size:.42em; } 
  /* ---- Fondus mobiles : la photo passe DERRIERE le titre -----------------
     Demande user : "the darkest part of the fade should end just at the level
     of subtitle". Le sous-titre est SOUS la photo, donc la photo doit
     descendre jusqu'a lui : elle est prolongee de 53 a 57px (distance mesuree
     entre le bas de la photo et le haut du sous-titre).
     PROLONGEMENT SANS TOUCHER AU RAPPORT : `box-sizing:content-box` fait que
     `aspect-ratio` dimensionne la boite de CONTENU, et le `padding-bottom`
     s'ajoute par dessus. L'`img` en `inset:0` couvre content+padding (son bloc
     conteneur est la boite de padding), donc `cover` remplit toute la hauteur.
     Un pixel FIXE et non un rapport : la hauteur du bloc titre ne varie pas
     avec la largeur, un rapport aurait derive sur la plage 375-781px.
     Valeurs re-calees apres la suppression de la bordure de 1px : la boite de
     padding a gagne 2px de large, donc la photo depassait le sous-titre de 2 a
     3px (57/53/54 -> 55/51/51).
     `padding-top` de la carte est inchange : le texte ne bouge pas, c'est la
     photo qui passe dessous. Rampes resolues sur chaque photo, pleines au
     niveau du sous-titre, et >= 0,97 des le haut du titre (titre blanc mesure
     a 18,88:1). Rognage lateral 16 a 23%. */
  .prod-card .prod-media{ box-sizing:content-box; }
  .prod-bento a[href="/solarroof/"] .prod-media{ padding-bottom:55px; }
  .prod-bento a[href="/solarpark/"] .prod-media{ padding-bottom:51px; }
  .prod-bento a[href="/solarfit/"] .prod-media{ padding-bottom:51px; }
  .prod-bento a[href="/solarroof/"] .prod-media::after{
    background:linear-gradient(to bottom,
      rgba(184,108,14,0.000) 28.2%,
      rgba(155, 91,13,0.156) 34.1%,
      rgba(129, 77,11,0.301) 40.1%,
      rgba(104, 62, 9,0.447) 46.0%,
      rgba( 80, 48, 8,0.593) 52.0%,
      rgba( 56, 35, 6,0.739) 57.9%,
      rgba( 36, 24, 5,0.885) 63.9%,
      rgba( 31, 21, 4,0.929) 69.8%,
      rgba( 27, 18, 4,0.970) 75.8%,
      rgba( 23, 16, 4,1.000) 81.7%,
      rgba( 23, 16, 4,1.000) 87.7%,
      rgba( 23, 16, 4,1.000) 93.7%,
      rgba( 23, 16, 4,1.000) 100.0%);
  }
  .prod-bento a[href="/solarpark/"] .prod-media::after{
    background:linear-gradient(to bottom,
      rgba(184,108,14,0.000) 28.0%,
      rgba(184,108,14,0.000) 34.0%,
      rgba(161, 95,13,0.122) 39.9%,
      rgba(134, 80,11,0.274) 46.1%,
      rgba(109, 65, 9,0.418) 52.0%,
      rgba( 85, 51, 8,0.563) 57.9%,
      rgba( 61, 38, 6,0.708) 63.9%,
      rgba( 40, 26, 5,0.852) 69.8%,
      rgba( 32, 21, 4,0.920) 75.7%,
      rgba( 26, 18, 4,0.972) 81.9%,
      rgba( 23, 16, 4,1.000) 87.9%,
      rgba( 23, 16, 4,1.000) 93.8%,
      rgba( 23, 16, 4,1.000) 100.0%);
  }
  .prod-bento a[href="/solarfit/"] .prod-media::after{
    background:linear-gradient(to bottom,
      rgba(184,108,14,0.000) 28.1%,
      rgba(156, 92,13,0.153) 34.0%,
      rgba(129, 77,11,0.299) 40.0%,
      rgba(105, 63, 9,0.445) 46.0%,
      rgba( 80, 49, 8,0.591) 51.9%,
      rgba( 57, 35, 6,0.736) 57.9%,
      rgba( 39, 25, 5,0.865) 63.9%,
      rgba( 33, 22, 4,0.913) 69.9%,
      rgba( 29, 20, 4,0.947) 75.8%,
      rgba( 24, 17, 4,0.989) 81.8%,
      rgba( 23, 16, 4,1.000) 87.8%,
      rgba( 23, 16, 4,1.000) 93.7%,
      rgba( 23, 16, 4,1.000) 100.0%);
  }
}

/* --- A11y + readability pass (impeccable audit, 2026-08-02) --- */
/* 1. Amber text fails contrast on light backgrounds (2.03:1). Darker amber
      scoped to light sections only: 5.09:1 on white, 4.75:1 on the chip tint.
      Amber on dark sections and on filled buttons is untouched. */
.sec-light .chip,
.sec-grey .chip { color: #9C6100; }
.sec-light .text-amber,
.sec-grey .text-amber,
.card-body .text-amber { color: #9C6100 !important; }

/* 2. Cap the measure on wide text blocks (was ~134ch on desktop). Cards and
      columns are already narrower, so they are unaffected. */
.sec-light p,
.sec-grey p { max-width: 68ch; }
.sec-light p.has-text-align-center,
.sec-grey p.has-text-align-center { margin-inline: auto; }

/* 3. Tap targets: footer links were display:inline, so only 19px of the 31.5px
      line box was clickable. inline-block makes the whole line box the target
      (31.5px, above the 24px WCAG 2.2 AA minimum) with no change in height.
      Card links already measured 29px, so they are left alone. */
.footer-links a { display: inline-block; }
/* Hero copy legibility (impeccable audit): muted-light was tuned for solid dark
   sections and is too dim over a photo. */
.hero-solar .wp-block-cover__inner-container p:not(.chip) { color: #FFFFFF !important; }
.hero-solar .h1-sub { color: #FFFFFF; opacity: 1; }


/* Hero CTA microcopy: answers 'how long?' and 'am I committing?' without
   lengthening the button label. */


/* ====== Hero: AUCUN voile (choix client 2026-08-23) ======
   On affiche la photo uploadee telle quelle, sans degrade par-dessus.
   Seule reste la position de la pastille, posee sur le bord bas des panneaux. */
/* VOILE D'ORIGINE RETABLI SUR TOUTES LES PAGES, ACCUEIL COMPRIS (2026-08-28,
   demande du user sur capture de l'ancienne version): le degrade ambre en
   diagonale a 100deg, uniforme, identique en mobile et en desktop -- il n'y a
   jamais eu de variante mobile. Source: main.css.bak-overlay du 2026-08-06.
   L'accueil en etait prive depuis le 2026-08-23 (photo vignettee, aucun voile).
   NB WordPress pose de lui-meme un noir a 50% sur le bloc Couverture
   (span .wp-block-cover__background.has-background-dim) : d'ou le !important,
   qui le remplace au lieu de s'y ajouter.
   Ne pas y remettre l'ellipse ni le voile du haut: c'etaient des reglages faits
   pour la photo de l'accueil uniquement. */
/* @property : sans lui, --ss n'est pas animable et le spotlight apparait d'un
   coup. Non supporte -> la valeur change instantanement, sans casse. */
@property --ss { syntax: '<number>'; inherits: false; initial-value: 0; }

.hero-solar .wp-block-cover__background {
  background:
    linear-gradient(100deg, rgba(22, 13, 2, 0.92) 0%, rgba(60, 35, 5, 0.83) 50%, rgba(120, 70, 10, 0.66) 100%),
    linear-gradient(0deg, rgba(160, 92, 12, 0.18), rgba(160, 92, 12, 0.18)) !important;
  opacity: 1 !important;
  /* Allegement de 10% sur le haut (toiture + ce qui est au-dessus). */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.90) 34%, #000 52%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.90) 34%, #000 52%);
}

/* SPOTLIGHT : ACCUEIL UNIQUEMENT. Sur les autres pages le hero garde juste le
   voile ambre. La 2e couche de masque n'existe donc que sous body.home. */
body.home .hero-solar .wp-block-cover__background {
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.90) 34%, #000 52%),
    radial-gradient(circle var(--sr, 260px) at var(--sx, -600px) var(--sy, -600px),
      rgba(0,0,0,calc(1 - var(--ss, 0))) 0%,
      rgba(0,0,0,calc(1 - var(--ss, 0))) 44%,
      rgba(0,0,0,calc(1 - var(--ss, 0) * 0.62)) 64%,
      rgba(0,0,0,calc(1 - var(--ss, 0) * 0.28)) 82%,
      rgba(0,0,0,1) 100%);
          mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.90) 34%, #000 52%),
    radial-gradient(circle var(--sr, 260px) at var(--sx, -600px) var(--sy, -600px),
      rgba(0,0,0,calc(1 - var(--ss, 0))) 0%,
      rgba(0,0,0,calc(1 - var(--ss, 0))) 44%,
      rgba(0,0,0,calc(1 - var(--ss, 0) * 0.62)) 64%,
      rgba(0,0,0,calc(1 - var(--ss, 0) * 0.28)) 82%,
      rgba(0,0,0,1) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transition: --ss 220ms var(--ease-out-strong);
}
@media (min-width: 782px) {
  /* Un decalage fixe ne marche pas: le bloc du hero se recentre quand la fenetre
     grandit (1px pour 2px de hauteur) alors que le bord des panneaux dans la photo
     bouge beaucoup moins. Ce clamp fait suivre le bord bas des panneaux de 720 a
     1080px de hauteur de fenetre (ecart mesure 0 a 10px). */
  body.home .hero-solar .chip { position: relative; top: clamp(-95px, calc(156px - 23.2vh), -25px); }
}
/* Sur mobile la pastille NE BOUGE PAS. */


/* Spotlight : desktop au pointeur fin uniquement. Aucun curseur au toucher, et
   on ne veut pas qu'un tap laisse un trou colle a l'ecran. */
@media (max-width: 781px), (hover: none), (pointer: coarse) {
  body.home .hero-solar .wp-block-cover__background { --ss: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero-solar .wp-block-cover__background { --ss: 0 !important; transition: none; }
}

/* ====== fin bloc hero ====== */


/* ===== SolarClean : photo nette en haut, texte en bas =====
   Meme composition que la carte produit SolarRoof : la photo occupe le haut,
   le degrade monte depuis le bas et s'eteint completement avant le sommet.

   POURQUOI LE PRECEDENT PARAISSAIT DUR : ses paliers tombaient de 0,93 a 0,50
   sur 12 % de la largeur, soit une cassure de 0,43 d'un coup. Ici la rampe a
   onze paliers et aucune marche ne depasse 0,17, avec des ecarts qui se
   resserrent vers le haut (courbe en sortie douce) : la transition se lit
   comme un fondu et non comme un bord.

   Couleurs : celles de la section (dark #171004, amber #F5A623). Brun dense
   sous le texte, transition ambree, puis transparence totale sur la photo. */
.sec-clean {
  /* Le groupe texte + chiffres + boutons est CENTRE verticalement dans la
     section au lieu d'etre cale en bas : bande de photo au dessus, meme
     respiration en dessous. */
  align-items: center;
  /* 800px = la limite ou le cadrage cover reste pilote par la LARGEUR
     (1440/1468 = 0.981) : au dela la photo se retrouve agrandie et rognee
     sur les cotes. Ne pas depasser sans recalculer. */
  min-height: 800px !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
/* Le conteneur interne d'un bloc Couverture est PLEINE LARGEUR (le layout
   constrained plafonne les enfants, pas le conteneur). Sans ca le contenu se
   colle au bord de l'ecran au lieu de suivre la grille du site (1140px). */
.sec-clean .wp-block-cover__inner-container {
  max-width: 1140px;
  margin-inline: auto;
}

/* Parallax : l'image doit deborder de la section, sinon la translation
   decouvrirait un bord. 90px de marge haut ET bas = l'amplitude exacte de
   initSectionParallax(). La classe est posee par le JS, donc sans JS (ou en
   mouvement reduit) l'image reste exactement cadree sur la section. */
.sec-clean.has-parallax .wp-block-cover__image-background {
  top: -90px;
  bottom: auto;
  height: calc(100% + 180px);
}
@media (max-width: 781px) {
  .sec-clean.has-parallax .wp-block-cover__image-background {
    top: -50px;
    height: calc(100% + 100px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec-clean.has-parallax .wp-block-cover__image-background {
    top: 0; height: 100%; transform: none !important;
  }
}

.sec-clean .wp-block-cover__background {
  /* Le texte demarre a 72% depuis le bas. Le h2 est en gros gras (seuil 3:1)
     et mesurait 12.83:1 a 0.85 de voile : il reste de la marge, donc la rampe
     est decalee vers le bas pour rendre du ciel a la photo. Marche max 0.18. */
  background: linear-gradient(to top,
    rgba(23, 16, 4, 0.97) 0%,
    rgba(23, 16, 4, 0.96) 30%,
    rgba(23, 16, 4, 0.94) 50%,
    rgba(26, 17, 4, 0.88) 62%,
    rgba(34, 21, 5, 0.74) 70%,
    rgba(52, 32, 6, 0.58) 76%,
    rgba(78, 47, 8, 0.40) 82%,
    rgba(108, 64, 10, 0.25) 87%,
    rgba(140, 82, 12, 0.12) 92%,
    rgba(166, 98, 13, 0.04) 96%,
    rgba(184, 108, 14, 0) 100%) !important;
  opacity: 1 !important;
}

/* Bande basse : le texte a gauche, les deux chiffres a droite. Les mettre cote
   a cote plutot que l'un sous l'autre raccourcit la bande d'environ 150px, donc
   la photo garde une vraie place en haut. */
/* Les deux colonnes s'etirent a la meme hauteur : la colonne de droite
   distribue chiffres en haut / boutons en bas, donc le bloc se ferme sur une
   ligne de base commune au lieu d'un bord bas en escalier de 105px. */
.sec-clean .clean-bottom { align-items: stretch; }
/* WP core impose align-self:flex-start via .is-vertically-aligned-top, donc
   la colonne ne s'etirait pas et space-between n'avait aucun effet. */
.sec-clean .clean-stats {
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
}
.sec-clean .clean-copy > p { max-width: 46ch; text-wrap: pretty; }
.sec-clean h2 { text-wrap: balance; }
/* Les boutons sortent de la colonne de texte : rangee centree tout en bas,
   ils ancrent la section au lieu d'etre noyes dans la colonne gauche. */
/* Les boutons remontent SOUS les chiffres, dans la colonne de droite :
   ils comblent le vide laisse par les stats remontees, et la section peut
   etre raccourcie par le bas d'autant. */
.sec-clean .clean-cta {
  justify-content: center;
  margin-top: 0;
}


/* Les deux chiffres sont EMPILES (l'un sous l'autre) au lieu d'etre cote a
   cote : chacun a toute la largeur de la colonne, le libelle respire. */
.sec-clean .clean-stats .clean-benefits {
  margin: 0;
  flex-direction: column;
  gap: clamp(1.4rem, 2.4vw, 2rem);
}
.sec-clean .clean-stats .clean-benefits > .wp-block-column {
  flex-basis: auto !important;
  width: 100%;
}
.sec-clean .clean-stats .stat-num {
  /* Les chiffres sont remontes la ou le degrade ne pese plus que 0.62 :
     l'ambre y tombe a 3.45:1 sur la photo. Meme ombre que le hero pour
     detacher le chiffre du fond sans reassombrir le degrade. */
  text-shadow: 0 1px 2px rgba(8, 4, 0, 0.62), 0 0 18px rgba(8, 4, 0, 0.55);
}
/* Sur une photo un gris moyen est fragile : creme plutot que muted-light.
   La hierarchie vient de la taille, pas de la nuance de gris. */
.sec-clean .stat-label { color: #EDE7DC !important; }

@media (max-width: 781px) {
  /* le texte prend toute la largeur : la bande de photo est reservee par le
     padding, et les paliers du degrade sont en PIXELS pour ne pas dependre de
     la hauteur de section. */
  /* Les 16rem (256px) ne servaient qu'a reserver la bande photo du haut ;
     avec un voile uniforme elles ne font que rallonger la section. */
  .sec-clean { padding-top: 4.5rem !important; padding-bottom: 5rem !important; }
  /* Paysage dans une boite tres haute : `cover` n'en montrait que 15,3% de la
     largeur, pile au centre (42-58%). Le technicien est a 12-38% de l'image,
     donc entierement rogne - d'ou le "ciel seulement". On decale a gauche. */
  .sec-clean .wp-block-cover__image-background { object-position: 20% 50% !important; }
  .sec-clean .clean-copy > p { max-width: none; }
  .sec-clean .clean-stats { margin-top: 1.5rem; }
  /* empile : space-between n'a plus de hauteur a distribuer, l'ecart
     chiffres / boutons retombait a 0. */
  .sec-clean .clean-cta { margin-top: 2rem; }
  /* Parallax : l'image doit deborder de la section, sinon la translation
   decouvrirait un bord. 90px de marge haut ET bas = l'amplitude exacte de
   initSectionParallax(). La classe est posee par le JS, donc sans JS (ou en
   mouvement reduit) l'image reste exactement cadree sur la section. */
.sec-clean.has-parallax .wp-block-cover__image-background {
  top: -90px;
  bottom: auto;
  height: calc(100% + 180px);
}
@media (max-width: 781px) {
  .sec-clean.has-parallax .wp-block-cover__image-background {
    top: -50px;
    height: calc(100% + 100px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec-clean.has-parallax .wp-block-cover__image-background {
    top: 0; height: 100%; transform: none !important;
  }
}

/* VOILE UNIFORME repris du hero, plus de fondu : la photo vit sous TOUT le
     contenu au lieu d'etre nette en haut puis noyee. C'est ce qui permet de
     supprimer la bande photo reservee et donc de raccourcir la section. */
  .sec-clean .wp-block-cover__background {
    background:
      linear-gradient(160deg,
        rgba( 22, 13,  2, 0.94)   0%,
        rgba( 40, 24,  4, 0.92)  35%,
        rgba( 62, 37,  6, 0.89)  65%,
        rgba(104, 61, 10, 0.86) 100%),
      linear-gradient(0deg, rgba(160, 92, 12, 0.13), rgba(160, 92, 12, 0.13)) !important;
    opacity: 1 !important;
  }
}

/* ===== Exemple concret : comparaison ANNUELLE avant / apres =====
   Le brief client ne demande QU'UN chiffre annuel : 4 500 MAD/mois, soit
   54 000 MAD/an, dont environ la moitie effacee (~27 000 MAD/an). Les douze
   pourcentages mensuels de la version precedente etaient une invention de mise
   en scene, sans source : ils ont ete retires (regle du projet : chaque chiffre
   affiche doit venir d'une source client).

   FORME : deux colonnes COTE A COTE, meme mesure a deux moments, donc UNE seule
   serie et UNE seule couleur -> pas de legende, ce sont les etiquettes sous les
   barres qui portent l'identite. La difference de hauteur EST le message.

   COULEURS : palette de theme.json uniquement. Sur fond clair l'ambre plafonne
   a 2,03:1 et ne peut pas porter la donnee ; il sert d'etat de survol.
     barres  #171004  -> 18,88:1 sur blanc
     survol  #F5A623  -> 8,80:1 contre la barre au repos
     piste   #EDEAE3  -> reference haute (la facture entiere) */
.exemple { background: transparent; border: 0; padding: 0; }

.bill {
  /* Deux couleurs de marque : le AVANT en brun sombre du site, le APRES en
     ambre de marque. L'ambre ne fait que 2,03:1 sur blanc, sous le 3:1 d'un
     objet graphique -- mais la REGLE DE SECOURS de la methode dataviz s'applique
     ici : la valeur de chaque barre est imprimee AU-DESSUS d'elle et son nom
     EN DESSOUS, donc rien ne depend de la forme ambre seule. C'est ce qui
     rendait l'ambre illegal sur douze barres non etiquetees et legal sur deux.
     Separation des deux barres entre elles : 8,80:1. */
  --bill-before: #171004;
  --bill-after:  #F5A623;
  /* arrondi cale sur le langage du site (cartes 22px, FAQ 16px) */
  --bill-radius: clamp(10px, 1.7vw, 18px);
  --bill-plot-h: clamp(190px, 26vw, 280px);
  max-width: 560px;
  margin: 0 auto;
}

.bill-duo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(1.6rem, 7vw, 4.5rem);
}

/* La colonne entiere est le bouton : une seule cible, large et haute. */
.bill-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  flex: 1 1 0; max-width: 160px;
  margin: 0; padding: 0; border: 0;
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer; text-align: center;
}
.bill-col:focus-visible { outline: 3px solid #1B1712; outline-offset: 6px; }

/* Zone de tracage a hauteur fixe : les deux colonnes partagent la meme
   ligne de base ET le meme plafond, sinon la comparaison est fausse. */
.bill-plot {
  position: relative; display: block;
  width: 100%; height: var(--bill-plot-h);
}
/* Pas de trace fantome derriere les barres : derriere la colonne "apres" elle
   redonnerait exactement l'effet "une tour dans une tour" refuse par le user.
   Deux barres nues, comparees par la hauteur seule. */
.bill-plot i {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--v);
  /* sommet arrondi, base droite : la barre reste ancree a sa ligne de base
     (spec dataviz) tout en reprenant la rondeur des cartes du site. */
  border-radius: var(--bill-radius) var(--bill-radius) 0 0;
  transform-origin: bottom;
  transition: translate 160ms var(--ease-out-strong);
}

/* Les barres poussent quand la section ENTRE dans le viewport, comme le reste
   du site (.reveal + .in-view posee par l'IntersectionObserver de main.js).
   Sans ce declencheur l'animation se jouait au chargement : arrivee en bas de
   page, elle etait finie depuis longtemps et le graphique paraissait fige. */
html.has-js .bill.reveal:not(.in-view) .bill-plot i { transform: scaleY(0); }
html.has-js .bill.reveal.in-view .bill-plot i {
  animation: billGrow 620ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
/* La barre AVANT part seule, la barre APRES arrive apres coup : c'est la chute
   du graphique ("voila ce qu'il en reste"). 90ms etaient imperceptibles -- deux
   mouvements ne se lisent comme successifs qu'a partir de ~150ms d'ecart. A
   380ms, la 1re barre est deja largement montee (courbe ease-out, l'essentiel
   se joue dans les 300 premieres ms) quand la 2e demarre.
   Sequence totale : 380 + 620 = 1s, ce qui reste dans le budget habituel. */
html.has-js .bill.reveal.in-view .bill-col[data-k="after"] .bill-plot i {
  animation-delay: 380ms;
}
.bill-col[data-k="before"] .bill-plot i { background: var(--bill-before); }
.bill-col[data-k="after"]  .bill-plot i { background: var(--bill-after); }
@keyframes billGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Valeur posee juste au-dessus du sommet de la barre. */
.bill-num {
  position: absolute; left: 0; right: 0; bottom: var(--v);
  padding-bottom: 0.5rem;
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem); line-height: 1;
  letter-spacing: -0.02em; color: #1B1712;
  font-variant-numeric: tabular-nums;
}
.bill-num em {
  display: block; margin-top: 0.28rem;
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: #6E675C;
}
.bill-lab {
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: #1B1712;
}

/* Les couleurs portent desormais l'identite des deux series : le survol ne les
   change pas, il souleve la barre (Emil : la marque survolee doit repondre). */
.bill-col:hover .bill-plot i,
.bill-col:focus-visible .bill-plot i { translate: 0 -3px; }

/* Detail au survol, pose sur la colonne. Cache par defaut. */
.bill-tip {
  position: absolute; bottom: calc(100% + 0.4rem); left: 50%;
  transform: translateX(-50%);
  z-index: 4; pointer-events: none;
  background: #171004; color: #FFFFFF;
  padding: 0.4rem 0.7rem; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 0.74rem; line-height: 1.3;
  white-space: nowrap;
  opacity: 0; visibility: hidden; margin-bottom: -4px;
  transition: opacity 140ms var(--ease-out-strong),
              margin-bottom 140ms var(--ease-out-strong),
              visibility 0s linear 140ms;
}
.bill-col:hover .bill-tip,
.bill-col:focus-visible .bill-tip {
  opacity: 1; visibility: visible; margin-bottom: 0;
  transition-delay: 0s, 0s, 0s;
}

.bill-cap {
  max-width: 48ch; margin: 1.5rem auto 0; text-align: center;
  font-size: 0.78rem; letter-spacing: 0.01em; color: #6E675C;
}

/* Conclusion: la hierarchie vient de la famille, de la graisse et de la taille.
   PIEGE : `.sec-light p` (0,1,1) impose max-width:68ch SANS marge auto, donc
   tout <p> ajoute ici sort decentre s'il n'est pas prefixe .sec-exemple. */
.sec-exemple .exemple-support {
  max-width: 52ch; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  text-align: center; color: #4A443B;
}
.sec-exemple .exemple-payoff {
  max-width: 38ch; margin: 0.7rem auto 0; text-align: center;
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3; letter-spacing: -0.015em;
  color: #1B1712; text-wrap: balance;
}
.sec-exemple .exemple-note {
  max-width: 58ch; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  text-align: center;
  font-size: 0.76rem; line-height: 1.65; color: #6E675C;
}

@media (max-width: 520px) {
  .bill { --bill-plot-h: 170px; }
  .bill-duo { gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bill-plot i { transition: none; }
  html.has-js .bill.reveal .bill-plot i,
  html.has-js .bill.reveal.in-view .bill-plot i,
  html.has-js .bill.reveal.in-view .bill-col[data-k="after"] .bill-plot i {
    animation: none !important; transform: none !important;
  }
  .bill-col:hover .bill-plot i { translate: none; }
  .bill-tip { transition: none; }
}
@media print {
  html.has-js .bill.reveal .bill-plot i,
  html.has-js .bill.reveal.in-view .bill-plot i {
    animation: none !important; transform: none !important;
  }
}


/* ================================================================
   Section produits : composition bento (2026-08-26, version claire)
   Les 3 cartes sont BLANCHES. La PHOTO OCCUPE TOUTE LA CARTE
   (position:absolute; inset:0) et un degrade blanc la recouvre
   progressivement : l'image passe donc SOUS le blanc sans jamais
   s'interrompre. Pas de sous-bloc photo = pas de coins arrondis au
   milieu de la carte et pas de raccord visible.
   Regle : le degrade atteint le blanc PLEIN avant le texte, donc
   aucun texte ne repose sur la photo et les contrastes sont ceux
   du blanc plein, independamment de l'image.
   Typo inchangee : Sora titres / Inter corps.
   ================================================================ */
.prod-bento, .prod-bento *{ box-sizing:border-box; }
.prod-bento{
  position:relative; left:50%; transform:translateX(-50%);
  /* !important obligatoire : le layout constrained du coeur WP impose
     margin-left/right:auto !important, ce qui recentrait le bloc une 2e fois */
  margin-inline:0 !important; max-width:none; width:min(1560px, calc(100% + 2.5rem));
  display:grid;
  grid-template-columns:1.06fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1.1rem;
}
.prod-card{
  position:relative; display:flex; flex-direction:column;
  overflow:hidden; isolation:isolate;
  /* Traitement SolarClean : la carte devient brun sombre et la photo se fond
     dedans par un degrade brun -> ambre, au lieu de se fondre dans du blanc. */
  /* Plus de bordure : a 0,18 d'ambre sur un fond #171004 le liseré composait
     vers rgb(63,33,9), donc un trait sombre qui se lisait comme un contour noir
     sur le gris clair de section. `border:0` plutot que `transparent` : avec une
     bordure transparente la photo (en `inset:0`, donc calee sur la boite de
     PADDING) s'arreterait 1px avant le bord et laisserait un anneau sombre
     autour de l'image. A zero, la photo va jusqu'au bord de la carte. */
  background:#171004; border:0; border-radius:22px;
  text-decoration:none; color:inherit;
  transition:translate 220ms var(--ease-out-strong),
             scale 160ms var(--ease-out-strong),
             box-shadow 220ms var(--ease-out-strong),
             border-color 220ms var(--ease-out-strong);
}
/* anneau ENCRE : l'ambre ne fait que 2,03:1 sur le gris de section, or WCAG 2.2
   demande 3:1 pour un indicateur de focus. #1B1712 donne ~15:1 */
.prod-card:focus-visible{ outline:3px solid #1B1712; outline-offset:3px; }

/* la photo couvre la carte entiere : ses 4 coins coincident avec ceux de la
   carte, donc `border-radius:inherit` est ici correct (il ne cree aucun coin
   arrondi interieur) et il conserve l'anticrenelage quand la carte est
   transformee (reveal, survol, appui). */
/* `background` ici n'est jamais vu (la photo couvre la boite) mais il remplit
   les interstices sous-pixel au bord bas, ou l'on voyait sinon passer le fond. */
.prod-media{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#171004; }
.prod-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  object-position:var(--focus, 50% 50%);
  transition:transform 420ms var(--ease-out-strong);
}

/* --media-ar = rapport EXACT de la photo. La boite de la photo adopte ce
   rapport, donc `cover` n a plus rien a rogner : zoom 0%.
   --media-pad = hauteur de la photo en % de sa LARGEUR (un padding en % se
   calcule sur la largeur), pour lui reserver sa place en mobile. */
.prod-bento a[href="/solarroof/"]{ --media-ar:1024/560;  --media-pad:54.69%; }
.prod-bento a[href="/solarpark/"]{ --media-ar:1448/1086; --media-pad:75%; }
.prod-bento a[href="/solarfit/"]{  --media-ar:1400/1105; --media-pad:78.93%; }

/* =========== CADRAGE DES PHOTOS ====================================
   Depuis le passage a `aspect-ratio:var(--media-ar)`, la boite de chaque photo
   a EXACTEMENT le rapport de la photo : `cover` ne rogne plus rien, le zoom est
   de 0% (mesure 0,0% x 0,0% en 375 / 900 / 1440). Consequence directe :
   **`--focus` (object-position) n'a plus aucun effet**, puisqu'il n'y a plus de
   debordement dans lequel se deplacer. Les declarations sont conservees comme
   point d'accroche si on reintroduisait un jour du recadrage.
   POUR RECADRER MAINTENANT, il faut recadrer le FICHIER SOURCE. C'est ce qui a
   ete fait pour :
     solarroof-toiture-panneaux.jpg   = original moins 18% de ciel en haut
                                        (zone visible : 73% de ciel -> 10,6%,
                                         panneaux 0,1% -> 15,7%)
     solarfit-pergola-terrasse.jpg    = original reduit aux 85% de gauche,
                                        pour degager la terrasse cote gauche
   POUR CHANGER LA QUANTITE de photo visible (et non son cadrage) :
     `.prod-hero .prod-media::after`  paliers du fondu de la grande carte
     `.prod-mini .prod-media::after`  paliers du fondu des petites cartes
   ==================================================================== */
.prod-bento a[href="/solarroof/"] img{ --focus:50% 50%; }
.prod-bento a[href="/solarpark/"] img{ --focus:50% 50%; }
.prod-bento a[href="/solarfit/"]  img{ --focus:50% 22%; } /* remonte pour degager la toiture de la pergola */
.prod-media::after{ content:''; position:absolute; inset:0; pointer-events:none; }

.prod-body{ position:relative; z-index:2; }

/* ---- grande carte : la photo occupe le haut, le blanc monte par en bas ---- */
/* Le corps de texte suit IMMEDIATEMENT la photo (padding-top = hauteur exacte
   de la photo, en % de la largeur). Avant, il etait cale en bas de la carte :
   selon la largeur il pouvait recouvrir la photo AVANT la fin du fondu et la
   trancher net (constate vers 1664px : photo haute de 439px, corps a 339px,
   donc coupe a 77% du fondu, encore a 33% de blanc). Ici les deux coincident
   par construction, a toutes les largeurs. */
.prod-hero{ grid-row:1 / span 2; min-height:0; justify-content:flex-start; padding-top:var(--media-pad); }
/* Fondu ANCRE SUR LE TEXTE, pas sur un pourcentage de la carte. Un degrade en
   pourcentage se decale des que la hauteur du texte change (elle change avec la
   largeur : en 900px le titre remontait a 48,9% alors que le blanc n'arrivait
   qu'a 53,5%, donc le titre finissait sur la photo a 0,70 d'opacite). Ancre sur
   le corps de texte, le fondu tombe toujours au bon endroit. */
/* La photo n'a pas besoin de couvrir toute la hauteur : sous le bas du fondu
   elle est de toute facon invisible. En limitant sa hauteur, la boite retrouve
   un rapport proche de celui de l'image, donc `cover` cesse de rogner les cotes
   (on passait de 79% a 61% de la largeur visible = effet de zoom). Elle doit
   rester >= au haut du corps de texte (338px ici), sinon un bord apparaitrait
   dans le fondu. */
.prod-hero .prod-media{ bottom:auto; height:auto; aspect-ratio:var(--media-ar); border-radius:22px 22px 0 0; }
/* -2px : `aspect-ratio` dimensionne la photo sur la boite de PADDING de la carte
   (714px, a l'interieur de la bordure de 1px) alors que `padding-top` en % se
   calcule sur la largeur de la CELLULE de grille (716px). D'ou un interstice
   permanent de 1,11px entre le bas de la photo et le corps. */
.prod-hero .prod-body{ padding:1.5rem 2.1rem 1.9rem; background:#171004; margin-top:-2px; }
/* Le fondu vit DANS la photo et se termine exactement sur son bord bas. C'est
   la seule forme qui ne peut pas se decaler : ancre sur la CARTE il derivait
   quand la hauteur du texte changeait ; ancre sur le TEXTE il laissait un bord
   net quand la photo s'arretait plus haut que le fondu (constate en 900px).
   Ici les deux extremites sont solidaires de la photo. Sous la photo, c'est le
   blanc de la carte : jamais de raccord visible. */
.prod-hero .prod-media::after{
  /* Meme methode que le fondu de la section SolarClean : beaucoup de paliers
     et aucune marche au dessus de 0.14. L'ancienne version sautait de .28 a
     .82 d'un coup (marche de 0.54) et c'est cette marche qu'on lisait comme
     un bord net en bas de la photo. */
  /* Le fondu demarre a 30% au lieu de 50% : la montee est etalee sur 70% de la
     hauteur au lieu de 50%, donc beaucoup plus douce en haut.
     Et il atteint le brun PLEIN des 96%, pas a 100% : sur la derniere rangee de
     pixels l'interpolation restait a ~0.98, laissant filtrer 2% de pelouse
     claire - c'est le trait clair qu'on voyait apparaitre au survol quand la
     photo grandit. Les 4 derniers % sont maintenant opaques par construction. */
  /* La durete ne venait PAS du point de depart mais de la PENTE : l'ancienne
     rampe gagnait 0.0025 d'alpha par % en haut et 0.08 par % sur le dernier
     segment, soit un rapport de 32x. C'est cette arrivee brutale qu'on lisait.
     Ici la pente est quasi constante (rapport 7,7x), le depart remonte a 15%
     et l'opacite pleine est atteinte a 99% puis tenue. Marche max 0.095. */
  /* RAMPE CALCULEE SUR LA LUMINANCE REELLE DE LA PHOTO, pas sur l'alpha.
     Une rampe d'alpha reguliere ne donne PAS un fondu regulier : le bas de
     cette photo est la pelouse au soleil, la zone la plus CLAIRE du bas de
     l'image, donc le voile devait ecraser L* 50 -> 0 sur les derniers pixels
     (chute mesuree de 10 a 14 points de L* par tranche, contre 2 a 3 ailleurs).
     Ici l'alpha est resolu ligne par ligne pour que la CLARTE PERCUE descende
     regulierement : le voile monte plus tot, et la chute finale disparait
     (2,5 a 3,6 points par tranche sur toute la fin). */
  background:linear-gradient(to bottom,
    rgba(184,108,14,0.000) 34.1%,
    rgba(150, 88,12,0.187) 39.4%,
    rgba(119, 71,10,0.359) 45.1%,
    rgba( 89, 54, 8,0.537) 50.5%,
    rgba( 59, 36, 6,0.724) 56.1%,
    rgba( 50, 31, 5,0.781) 61.5%,
    rgba( 43, 28, 5,0.827) 67.1%,
    rgba( 38, 25, 5,0.869) 72.5%,
    rgba( 34, 23, 5,0.902) 77.9%,
    rgba( 32, 21, 4,0.921) 83.5%,
    rgba( 27, 18, 4,0.970) 88.9%,
    #171004                94.6%,
    #171004               100%);
}

/* ---- cartes secondaires : le blanc vient de la gauche ---- */
.prod-mini{ min-height:15.5rem; justify-content:center; }
.prod-mini .prod-body{ width:47%; padding:1.5rem 1.6rem; }
/* photo calee a DROITE : hauteur pleine, largeur deduite du rapport, donc
   aucun rognage. Bord gauche a angle DROIT (le degrade y est deja blanc plein,
   la jonction est invisible) : c'est l'arrondi de ce bord INTERIEUR qui donnait
   les coins courbes au milieu de la carte. */
.prod-mini .prod-media{ left:auto; width:auto; aspect-ratio:var(--media-ar); border-radius:0 22px 22px 0; }
.prod-mini .prod-media::after{
  /* Idem a l'horizontale. L'ancienne marche de 0.42 (entre 16% et 30%) faisait
     un bord vertical visible juste apres le texte. La rampe demarre un peu plus
     tot pour que la droite de la photo reste aussi degagee qu'avant. */
  background:linear-gradient(to right,
    #171004               0%,
    #171004               10%,
    rgba( 23, 16, 4,.93)  16%,
    rgba( 26, 17, 4,.83)  22%,
    rgba( 34, 21, 5,.70)  28%,
    rgba( 40, 25, 5,.57)  34%,
    rgba( 52, 32, 6,.44)  40%,
    rgba( 78, 47, 8,.32)  46%,
    rgba(108, 64,10,.22)  52%,
    rgba(140, 82,12,.14)  58%,
    rgba(166, 98,13,.08)  64%,
    rgba(178,104,14,.03)  71%,
    rgba(184,108,14,0)    78%);
}

/* ================= FONDU DES PETITES CARTES : ANCRE SUR LA CARTE =========
   La photo des minis a une largeur DERIVEE de sa hauteur (`aspect-ratio` +
   `height:100%`). Quand la carte se retrecit elle devient plus courte, donc la
   photo se retrecit AUSSI et passe de 66% de la largeur de carte (a 1440px) a
   99% (a 800px). Des paliers exprimes en % de la PHOTO glissent donc sous le
   texte : voile mesure a 0,95 sous le texte a 1440px mais seulement 0,23-0,38
   a 800px, c'est-a-dire du texte pose sur une photo quasi nue.
   Exprime en % de la CARTE, le fondu est identique a toutes les largeurs.
   Le texte se termine entre 40% et 43,5% de la carte (corps a 47%, padding
   fixe), donc l'opacite pleine tenue jusqu'a 44% le couvre partout. */
@media (min-width:960px){
  .prod-mini::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(to right,
      #171004                0%,
      #171004               45%,
      rgba( 23, 16, 4,.93)  50%,
      rgba( 26, 17, 4,.83)  55%,
      rgba( 34, 21, 5,.70)  60%,
      rgba( 44, 28, 5,.56)  65%,
      rgba( 60, 37, 7,.42)  70%,
      rgba( 86, 52, 8,.29)  75%,
      rgba(112, 66,10,.18)  80%,
      rgba(140, 82,12,.09)  86%,
      rgba(166, 98,13,.03)  92%,
      rgba(184,108,14,0)    98%);
  }
  /* le fondu horizontal vit desormais sur la carte, plus sur la photo */
  .prod-mini .prod-media::after{ background:none; }
}

/* ---- SolarFit : rampe propre a sa photo ----------------------------------
   Les deux petites cartes partagent la meme rampe, mais pas la meme photo.
   Luminance mesuree dans la zone de fondu : SolarPark est plate (L* 55-58),
   donc son fondu se stabilise ; SolarFit (terrasse au couchant) est bien plus
   CLAIRE (L* 60-75) et continue de monter, donc le compose grimpait sans
   jamais se poser (+9,7 +9,5 +8,7 +8,5 +7,6 par tranche) et le passage se
   lisait plus dur. Rampe resolue sur SA luminance : le compose monte de facon
   reguliere (+1,2 a +6,7 puis retombe), variation max 6,7 contre 9,7.
   Specificite (0,2,1) : bat `.prod-mini::before` (0,1,1) quel que soit l'ordre. */
@media (min-width:960px){
  .prod-bento a[href="/solarfit/"]::before{
    background:linear-gradient(to right,
      #171004                45.0%,
      rgba( 23, 16, 4,.979) 50.4%,
      rgba( 23, 16, 4,.922) 55.7%,
      rgba( 27, 18, 4,.846) 60.9%,
      rgba( 31, 20, 5,.762) 66.2%,
      rgba( 38, 23, 5,.678) 71.6%,
      rgba( 53, 33, 6,.596) 76.9%,
      rgba( 68, 41, 7,.515) 82.2%,
      rgba( 84, 51, 8,.429) 87.4%,
      rgba(120, 71,11,.270) 92.7%,
      rgba(147, 86,12,.150) 95.0%,
      rgba(167, 98,13,.070) 96.5%,
      rgba(184,108,14,0)    98.0%);
  }
}

/* ---- 782 a 959px : le lien ne tient pas dans une colonne a 47% ----------
   `.prod-go` est en `white-space:nowrap` et mesure ~165px; avec 43,2px de
   padding il faut ~215px de corps. En dessous de 960px de viewport la carte
   descend sous 457px, donc 47% ne suffisent plus : on met un PLANCHER EN PIXELS
   plutot qu'un pourcentage fixe, sinon on elargit inutilement les cartes larges.
   A 960px et au-dessus, 47% >= 215px et les regles "larges" reprennent la main.
   Le fondu suit : opaque jusqu'a 53% (le texte finit a 51% au pire). */
@media (min-width:782px) and (max-width:959px){
  .prod-mini .prod-body{ width:max(47%, 215px); }
  .prod-mini::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(to right,
      #171004                0%,
      #171004               53%,
      rgba( 23, 16, 4,.93)  58%,
      rgba( 26, 17, 4,.83)  63%,
      rgba( 34, 21, 5,.70)  68%,
      rgba( 44, 28, 5,.56)  73%,
      rgba( 60, 37, 7,.42)  78%,
      rgba( 86, 52, 8,.29)  82%,
      rgba(112, 66,10,.18)  86%,
      rgba(140, 82,12,.09)  90%,
      rgba(166, 98,13,.03)  94%,
      rgba(184,108,14,0)    98%);
  }
  .prod-mini .prod-media::after{ background:none; }
}

/* ---- typographie : tout repose sur du blanc plein ---- */
.prod-body h3{
  font-family:'Sora',sans-serif; font-weight:700; color:#FFFFFF;
  letter-spacing:-.015em; margin:0 0 .5rem;
}
.prod-hero .prod-body h3{ font-size:clamp(1.85rem,2.5vw,2.4rem); line-height:1.08; }
.prod-mini .prod-body h3{ font-size:1.42rem; line-height:1.12; letter-spacing:-.01em; }
/* (0,2,0) : doit battre `.sec-grey p{max-width:68ch}` qui est (0,1,1) */
.prod-body .prod-lead{ color:#B8B2A6; line-height:1.6; text-wrap:pretty; }
.prod-hero .prod-body .prod-lead{ font-size:1rem; margin:0 0 1.05rem; max-width:46ch; }
.prod-mini .prod-body .prod-lead{ font-size:.875rem; line-height:1.55; margin:0 0 1rem; max-width:32ch; }
.prod-body .check-list{ margin:0 0 1.25rem; }
/* creme et non gris moyen : reprise de la regle SolarClean, un gris moyen est
   fragile des qu'il y a de la photo derriere. */
.prod-body .check-list li{ color:#EDE7DC; font-size:.9rem; margin-bottom:.42rem; }
.prod-body .check-list li:last-child{ margin-bottom:0; }
/* sur fond sombre l'ambre redevient utilisable : #9C6100 servait a compenser le
   blanc, il serait maintenant trop sombre. */
.prod-body .check-list li::before{ color:#F5A623; }

/* ---- pied : prix + lien ---- */
.prod-foot{ margin:0; display:flex; align-items:baseline; gap:1.15rem; flex-wrap:wrap; }
.prod-foot-stack{ display:block; }
.prod-foot-stack .prod-price{ display:block; margin-bottom:.45rem; }
.prod-price{
  font-family:'Sora',sans-serif; font-weight:600; font-size:1.02rem;
  line-height:1.3; color:#FFFFFF;
}
.prod-mini .prod-price{ font-size:.95rem; }
.prod-go{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.9rem; color:#F5A623;
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
}
.prod-arrow{ display:inline-block; transition:transform 200ms var(--ease-out-strong); }

/* ---- survol ---- */
@media (hover:hover) and (pointer:fine){
  .prod-card:hover{
    translate:0 -6px;
    /* anneau EXTERIEUR : une ombre interne serait recouverte par la photo
       (enfant peint apres le fond de la carte), une ombre externe non. */
    box-shadow:0 24px 48px -18px rgba(27,23,18,.18),
               0 0 0 1px rgba(245,166,35,.45);
  }
  .prod-card:hover .prod-media img{ transform:scale(1.05); }
  .prod-card:hover .prod-arrow{ transform:translateX(5px); }
}
/* appui : la carte repond des le pointer-down. Le bloc ci-dessus est derriere
   (hover:hover), donc le TACTILE n'avait aucun retour avant la navigation.
   `translate` et `scale` se composant, une seule regle suffit. */
.prod-card:active{ scale:.985; }

/* ---- Survol/appui portes par `translate` et `scale`, pas par `transform` ----
   `html.has-js .reveal` (0,2,1) impose `transition:.6s` ET un `transition-delay`
   de .1s a .34s sur la carte elle-meme; ces valeurs s'appliquaient donc aussi au
   survol (jusqu'a ~940ms de latence percue). Les proprietes INDEPENDANTES
   `translate` / `scale` se composent avec le `transform` du reveal tout en
   gardant leur propre minutage. */
html.has-js .prod-bento > a.reveal{
  transition:opacity .6s var(--ease-out-strong),
             transform .6s var(--ease-out-strong),
             translate 220ms var(--ease-out-strong),
             scale 160ms var(--ease-out-strong),
             box-shadow 220ms var(--ease-out-strong),
             border-color 220ms var(--ease-out-strong);
}
/* le decalage en cascade ne doit porter QUE sur l'entree, jamais sur l'interaction */
html.has-js .prod-bento > a.reveal.d1{ transition-delay:.10s,.10s,0s,0s,0s,0s; }
html.has-js .prod-bento > a.reveal.d2{ transition-delay:.22s,.22s,0s,0s,0s,0s; }
html.has-js .prod-bento > a.reveal.d3{ transition-delay:.34s,.34s,0s,0s,0s,0s; }

/* ---- tablette ---- */
@media (max-width:1024px){
  .prod-bento{ gap:.9rem; }
  .prod-hero .prod-body{ padding:1.3rem 1.5rem 1.6rem; }
  .prod-mini{ min-height:14rem; }
  .prod-mini .prod-body{ padding:1.25rem 1.35rem; }
  .prod-mini .prod-body h3{ font-size:1.28rem; }
  .prod-mini .prod-body .prod-lead{ font-size:.83rem; margin-bottom:.85rem; }
}

/* ---- mobile : une colonne, photo en haut sur les 3 ----
   `grid-auto-rows:1fr` egalise les hauteurs sur la carte la plus haute; la
   photo couvrant toute la carte, le surplus de hauteur profite directement
   a l'image des 2 petites cartes. ---- */
@media (max-width:781px){
  /* hauteurs NATURELLES : egaliser les rangees obligerait la photo a s etirer
     au-dela de son rapport, donc a etre rognee. Le zoom 0% passe avant. */
  .prod-bento{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; gap:1rem; }
  .prod-hero, .prod-mini{ grid-row:auto; min-height:0; justify-content:flex-end; }
  /* la photo est en position absolue : elle ne pousse plus la carte. C'est ce
     padding-top qui lui reserve sa place en haut. (Un element absolu se cale
     sur la boite de PADDING, donc inset:0 couvre bien toute la carte.) */
  /* reserve a la photo exactement sa hauteur naturelle (padding en % = calcule
     sur la largeur), donc elle tient sans etre rognee a toutes les largeurs */
  .prod-card{ padding-top:var(--media-pad); }
  /* Oubli du passage en sombre : ce fond etait reste #fff, donc en mobile la
     photo se fondait vers le brun puis heurtait un corps BLANC, et le texte
     clair y devenait illisible. */
  .prod-card .prod-body{ width:100%; padding:1.3rem 1.4rem 1.5rem; background:#171004; }
  .prod-hero .prod-body{ padding:1.3rem 1.4rem 1.5rem; }
  /* Fondu ANCRE SUR LE TEXTE et non sur un pourcentage de la carte : il tombe
     donc toujours juste au-dessus du texte, quelle que soit la hauteur de la
     carte ou la quantite de texte. C'est ce qui manquait : en pourcentage, la
     grande carte (beaucoup de texte) voyait son titre passer au-dessus du
     debut du degrade, donc directement sur la photo. */
  /* meme principe qu'en desktop : le fondu se termine sur le bord bas de la
     photo, donc il ne peut ni deriver ni laisser un bord net */
  /* meme interstice de 1,5px qu'en desktop (aspect-ratio sur la boite de
     padding vs padding-top en % sur la cellule) : le corps le recouvre. */
  /* en mobile la carte est verticale : le fondu horizontal ne s'applique pas */
  .prod-mini::before{ display:none; }
  .prod-card .prod-body{ margin-top:-2px; }
  .prod-card .prod-media::after{
    /* mobile : meme rampe douce que la grande carte */
    /* meme logique qu'en desktop : depart plus haut, et brun PLEIN des 96%
       pour qu'aucune rangee de photo ne filtre au bord bas. */
    background:linear-gradient(to bottom,
      rgba(184,108,14,0)     30%,
      rgba(178,104,14,.035)  37%,
      rgba(170,100,13,.08)   44%,
      rgba(158, 93,13,.14)   50%,
      rgba(145, 86,12,.21)   56%,
      rgba(131, 78,11,.29)   62%,
      rgba(117, 69,10,.37)   68%,
      rgba(102, 61, 9,.46)   74%,
      rgba( 86, 52, 8,.555)  80%,
      rgba( 70, 43, 7,.65)   85%,
      rgba( 56, 35, 6,.74)   89%,
      rgba( 44, 28, 5,.82)   93%,
      rgba( 34, 22, 5,.89)   96%,
      rgba( 28, 19, 4,.94)   98%,
      #171004                99%,
      #171004               100%);
  }
  /* cadrage propre au mobile : le recadrage y est bien plus serre, donc
     ces valeurs sont independantes de celles du desktop ci-dessus */
  .prod-bento a[href="/solarroof/"] img{ --focus:50% 50%; }
  .prod-bento a[href="/solarpark/"] img{ --focus:50% 50%; }
  .prod-bento a[href="/solarfit/"]  img{ --focus:50% 50%; }
  /* meme raison qu'en desktop : sans plafond de hauteur, une image paysage
     dans une boite portrait est rognee de 434 a 729px sur les cotes */
  .prod-hero .prod-media, .prod-mini .prod-media{
    left:0; right:0; top:0; bottom:auto; width:auto; height:auto;
    aspect-ratio:var(--media-ar); border-radius:22px 22px 0 0;
  }
  .prod-hero .prod-body h3{ font-size:1.6rem; }
  .prod-mini .prod-body h3{ font-size:1.35rem; }
  .prod-hero .prod-body .prod-lead,
  .prod-mini .prod-body .prod-lead{ max-width:none; font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .prod-card,
  .prod-media img,
  .prod-arrow{ transition:none !important; }
  .prod-card:hover{ translate:none !important; }
  .prod-card:hover .prod-media img{ transform:none !important; }
  .prod-card:hover .prod-arrow{ transform:none !important; }
  /* le retour d'appui RESTE : retour direct, pas du mouvement vestibulaire */
  .prod-card:active{ scale:.985 !important; }
}