/*
 * Prototype CSS only, planned for the 36 exact body IDs in pages-variants.json.
 * Root module must add both body classes only after is_page(ID) allowlist checks.
 * No copy, SEO, links, price, product grid or JavaScript behavior is changed.
 */

/* Shared wide hero frame for existing photo + copy markup. */
@media (min-width: 1025px) {
  body.cek-friendly-page #cek-facade > .hero {
    min-height: clamp(640px, 74vh, 680px);
  }

  body.cek-friendly-page #cek-facade > .hero .hero-in {
    max-width: 1160px;
    padding: 0 24px 40px;
    gap: 14px;
  }

  body.cek-friendly-page #cek-facade > .hero h1 {
    max-width: 19ch;
    font-size: clamp(34px, 3.25vw, 46px);
    line-height: 1.06;
  }

  body.cek-friendly-page #cek-facade > .hero .hero-in > p {
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.48;
  }

  body.cek-friendly-page #cek-facade > .hero .hero-ctas .btn {
    min-height: 44px;
  }

  body.cek-friendly-page #cek-facade > .hero .hero-proof {
    max-width: 780px;
    flex-wrap: wrap;
    gap: 9px 18px;
  }

  /* Compatibility and landing pages: keep the copy on the left over the existing full hero image. */
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(90deg, rgba(17, 20, 18, .82) 0%, rgba(17, 20, 18, .56) 34%, rgba(17, 20, 18, .12) 68%, transparent 100%),
                linear-gradient(0deg, rgba(17, 20, 18, .34) 0%, transparent 48%);
  }

  /* Finish pages use a centered composition and a proof line below the existing copy. */
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(180deg, rgba(17, 20, 18, .42) 0%, rgba(17, 20, 18, .64) 38%, rgba(17, 20, 18, .68) 100%);
  }

  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in {
    align-items: center;
    justify-content: center;
    max-width: 820px;
    min-height: 580px;
    margin-inline: auto;
    padding: 38px 24px 50px;
    text-align: center;
  }

  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1,
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    margin-inline: auto;
    text-align: center;
  }

  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-ctas,
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof {
    justify-content: center;
  }

  /* Editorial stories keep an ample photo and anchor the copy at the lower left. */
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(0deg, rgba(17, 20, 18, .92) 0px, rgba(17, 20, 18, .76) 190px, rgba(17, 20, 18, .58) 390px, transparent 540px);
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-in {
    justify-content: flex-end;
    padding-bottom: 64px;
  }

  /* Portéco has a real picture/media column and a separate copy column in the live DOM. */
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero {
    min-height: clamp(640px, 74vh, 680px);
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .porteco-hero-media {
    width: min(58vw, 760px);
  }
}

/* On phones the existing image leads, then fades into the current copy block. */
@media (max-width: 600px) {
  body.cek-friendly-page #cek-facade > .hero .hero-in > h1 { order: 1; }
  body.cek-friendly-page #cek-facade > .hero .hero-in > .hero-ctas { order: 2; }
  body.cek-friendly-page #cek-facade > .hero .hero-in > p { order: 3; }
  body.cek-friendly-page #cek-facade > .hero .hero-in > .hero-proof { order: 4; }
  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) {
    --friendly-photo-height: clamp(300px, 82vw, 360px);
    --friendly-copy-top: calc(var(--friendly-photo-height) - 74px);
    display: flex;
    min-height: 0;
    height: auto;
    align-items: stretch;
    overflow: hidden;
    color: #1d1d1f;
    background: #f7f5f2;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-bg {
    inset: 0 0 auto;
    width: 100%;
    height: var(--friendly-photo-height);
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after {
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247, 245, 242, 0) 0, rgba(247, 245, 242, 0) calc(var(--friendly-photo-height) - 136px), #f7f5f2 var(--friendly-copy-top), #f7f5f2 100%);
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in {
    width: 100%;
    max-width: none;
    margin: var(--friendly-copy-top) auto 0;
    padding: 0 20px 25px;
    gap: 9px;
    color: #1d1d1f;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1 {
    max-width: none;
    color: #1d1d1f;
    font-size: 29px;
    line-height: 1.08;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    max-width: 54ch;
    color: #454943;
    font-size: 16px;
    line-height: 1.48;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 3px;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn.light {
    border: 1px solid var(--blue, #0071e3);
    background: var(--blue, #0071e3);
    color: #fff;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn.ghost {
    border: 1px solid #93968f;
    background: transparent;
    color: #1d1d1f;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn:focus-visible,
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-ctas .btn:focus-visible {
    outline: 3px solid #17324f;
    outline-offset: 3px;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof {
    display: flex;
    width: 100%;
    max-width: none;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #c9c8c2;
    color: #454943;
    font-size: 12.5px;
    line-height: 1.4;
  }

  body.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof span {
    white-space: normal;
  }

  /* Portéco keeps its already-present picture and copy, with the photo first on mobile. */
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero {
    --friendly-photo-height: clamp(300px, 82vw, 360px);
    display: flex;
    min-height: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    color: #1d1d1f;
    background: #f7f5f2;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .porteco-hero-media {
    position: relative;
    inset: auto;
    order: 0;
    display: block;
    width: 100%;
    height: var(--friendly-photo-height);
    overflow: hidden;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .porteco-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero::after {
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247, 245, 242, 0) 0, rgba(247, 245, 242, 0) calc(var(--friendly-photo-height) - 136px), #f7f5f2 calc(var(--friendly-photo-height) - 74px), #f7f5f2 100%);
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-in {
    width: 100%;
    max-width: none;
    margin: 0 auto 0;
    padding: 0 20px 25px;
    gap: 9px;
    color: #1d1d1f;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero h1 {
    max-width: none;
    color: #1d1d1f;
    font-size: 29px;
    line-height: 1.08;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-in > p {
    color: #454943;
    font-size: 16px;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-ctas {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 3px;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-ctas .btn.light {
    border: 1px solid var(--blue, #0071e3);
    background: var(--blue, #0071e3);
    color: #fff;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-ctas .btn.ghost {
    border: 1px solid #93968f;
    background: transparent;
    color: #1d1d1f;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-ctas .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero.porteco-hero .hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    border-top-color: #c9c8c2;
    color: #454943;
    font-size: 12.5px;
  }
}



/* Family-specific tablet/mobile composition; photo remains the existing full hero image. */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Immersive pages retain the left-reading reference over the large photo. */
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero) {
    min-height: clamp(520px, 66vw, 620px);
  }
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(90deg, rgba(17,20,18,.78) 0%, rgba(17,20,18,.54) 38%, rgba(17,20,18,.12) 74%, transparent 100%),
                linear-gradient(0deg, rgba(17,20,18,.34) 0%, transparent 50%);
  }

  /* Finish pages use a taller, centered photo composition with clear proofs. */
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) {
    min-height: clamp(620px, 78vw, 700px);
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(180deg, rgba(17,20,18,.42) 0%, rgba(17,20,18,.64) 42%, rgba(17,20,18,.68) 100%);
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in {
    max-width: 760px;
    min-height: 570px;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding: 30px 28px 40px;
    text-align: center;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1,
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    margin-inline: auto;
    text-align: center;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-ctas,
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof {
    justify-content: center;
  }

  /* Editorial stories keep the photo dominant and pin the copy to its lower edge. */
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) {
    min-height: clamp(560px, 68vw, 640px);
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(0deg, rgba(17,20,18,.92) 0, rgba(17,20,18,.72) 230px, rgba(17,20,18,.42) 390px, transparent 560px);
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-in {
    justify-content: flex-end;
    padding-bottom: 42px;
  }
}

@media (max-width: 600px) {
  /* Finish: slightly taller image, centered title and light, readable proof chips. */
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) {
    --friendly-photo-height: clamp(330px, 88vw, 380px);
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in {
    align-items: center;
    text-align: center;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1,
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    margin-inline: auto;
    text-align: center;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof {
    justify-content: center;
    border-top: 0;
    padding-top: 2px;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof span {
    padding: 5px 8px;
    border: 1px solid rgba(29,31,29,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #353a35;
  }

  /* Editorial: shorter photo window, soft paper transition, action priority in one row when it fits. */
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) {
    --friendly-photo-height: clamp(270px, 72vw, 315px);
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(180deg, rgba(247,245,242,0) 0, rgba(247,245,242,0) calc(var(--friendly-photo-height) - 128px), #f7f5f2 var(--friendly-copy-top), #f7f5f2 100%);
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) h1 {
    font-size: 30px;
    line-height: 1.08;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn.light {
    flex: 1.5 1 136px;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn.ghost {
    flex: 1 1 100px;
  }
}

/* Tablet only: compact copy while keeping each family's existing photo composition. */
@media (min-width: 601px) and (max-width: 1024px) {
  body.cek-friendly-page #cek-facade > .hero .hero-ctas .btn {
    min-height: 44px;
  }

  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero) {
    min-height: 520px;
  }
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero) .hero-in {
    max-width: 1160px;
    padding: 28px 32px;
    gap: 10px;
  }
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero) h1 {
    max-width: 16ch;
    font-size: clamp(30px, 3.6vw, 38px);
    line-height: 1.08;
  }
  body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.45;
  }

  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) {
    min-height: 560px;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in {
    max-width: 650px;
    min-height: 0;
    padding: 24px 24px 30px;
    gap: 10px;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1 {
    max-width: 17ch;
    font-size: clamp(30px, 3.6vw, 36px);
    line-height: 1.08;
  }
  body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.45;
  }

  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) {
    min-height: 550px;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-in {
    padding: 24px 32px 30px;
    gap: 10px;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) h1 {
    max-width: 19ch;
    font-size: clamp(30px, 3.5vw, 36px);
    line-height: 1.08;
  }
  body.cek-friendly-page.cek-friendly-editorial #cek-facade > .hero:not(.porteco-hero) .hero-in > p {
    max-width: 50ch;
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Two editorial pages reported by Xavier: preserve the useful part of each scene. */
@media (min-width: 1025px) {
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) {
    align-items: center;
  }
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in {
    width: min(100%, 1160px);
    margin-inline: auto;
    padding: 48px 24px 48px 600px;
    justify-content: center;
    align-items: flex-start;
  }
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after {
    background: linear-gradient(90deg,rgba(17,20,18,.05),rgba(17,20,18,.12) 36%,rgba(17,20,18,.80) 62%,rgba(17,20,18,.87));
  }
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1 { font-size:clamp(34px,3vw,44px);max-width:20ch; }
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof { gap:10px 18px; }
  body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) { align-items:center; }
  body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in { justify-content:center;padding-block:48px; }
  body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1 { max-width:23ch;font-size:clamp(34px,3.1vw,44px); }
  body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p { max-width:48ch; }
  body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after {
    background:linear-gradient(90deg,rgba(17,20,18,.86),rgba(17,20,18,.71) 38%,rgba(17,20,18,.14) 72%,transparent);
  }
}
@media (min-width:1025px) and (max-width:1200px) {
  body.page-id-263085.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in {padding-left:52%;}
}

/* Finish families on tablets: image beside a light reading area, softly joined. */
@media (min-width:601px) and (max-width:1024px) {
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero){background:#f7f5f2;align-items:center;color:#20231f;min-height:570px}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-bg{width:56%;height:100%;inset:0 auto 0 0}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero)::after{background:linear-gradient(90deg,transparent 32%,rgba(247,245,242,.3) 41%,#f7f5f2 55%)}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in{max-width:none;width:100%;padding:32px 28px 32px 51%;text-align:left;align-items:flex-start;color:#20231f}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1{font-size:clamp(28px,3.4vw,35px);color:#20231f;text-align:left;margin-inline:0;max-width:19ch}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in > p{color:#454943;text-align:left;margin-inline:0}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-ctas{justify-content:flex-start;flex-wrap:wrap;gap:8px}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn{font-size:14px;padding:10px 16px;white-space:normal;text-align:center}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .btn.light{background:#0064d9;border-color:#0064d9;color:#fff}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .btn.ghost{background:transparent;border-color:#93968f;color:#20231f}
 body.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof{justify-content:flex-start;color:#454943;border-color:#c9c8c2;gap:8px 12px;font-size:12.5px;flex-wrap:wrap;margin-top:10px}
 body.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero:not(.porteco-hero){align-items:center}
}

/* Proposition locale uniquement. Activation prévue quand body reçoit .cek-friendly-special. */
@media (max-width: 600px) {
  body.page-id-302481.cek-friendly-special #cek-facade .hero-doc h1 { font-size: 30px; line-height: 1.12; }
  body.page-id-302481.cek-friendly-special #cek-facade .hero-doc-lead { font-size: 16px; line-height: 1.5; }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero h1 { font-size: 30px; line-height: 1.12; }
  body.page-id-285614.cek-friendly-special #cek-facade .about-lead { font-size: 16px; line-height: 1.55; }
  body.page-id-317741.cek-friendly-special #cek-facade h1 { font-size: 30px; line-height: 1.12; }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-lead { font-size: 16px; line-height: 1.55; }
  body.page-id-305966.cek-friendly-special #cek-facade .hero h1 { font-size: 30px; line-height: 1.12; }
  body.page-id-305966.cek-friendly-special #cek-facade .hero-in > p { font-size: 16px; line-height: 1.5; }
}

/* Qualité : image avant la copie sur téléphone, sans toucher aux textes/liens. */
@media (max-width: 600px) {
  body.page-id-317741.cek-friendly-special #cek-facade .quality-intro {
    padding: 26px 0 36px;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-intro > .wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-opening-photo {
    order: 1;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw) 4px;
    overflow: visible;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-hero-crop {
    position: relative;
    height: clamp(200px, 62vw, 240px);
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 0;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-hero-crop::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 54px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 243, 238, 0), #f6f3ee);
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-opening-photo figcaption {
    margin: 0 16px;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-intro > .wrap > .hero-copy {
    order: 2;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-intro > .wrap > .quality-jump {
    order: 3;
    margin-top: 8px;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-intro h1 {
    margin: 0 0 10px;
  }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-lead { margin: 0; }
  body.page-id-317741.cek-friendly-special #cek-facade .quality-actions { margin-top: 14px; }

  /* À propos : même enchaînement photo puis texte, conservant le crop existant. */
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero { padding: 26px 0 40px; }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero-media {
    position: relative;
    grid-row: 1;
    width: 100vw;
    height: clamp(200px, 62vw, 240px);
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 54px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 243, 238, 0), #f6f3ee);
  }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero-copy { grid-row: 2; }
  body.page-id-285614.cek-friendly-special #cek-facade .about-hero h1 { margin: 0 0 10px; }
  body.page-id-285614.cek-friendly-special #cek-facade .about-lead { margin: 0; }
}
/* Tendances: son hero est hors du conteneur historique vide. Scope exact de page. */
body.page-id-305966.cek-friendly-special .hero { position: relative; isolation: isolate; min-height: 640px; display: flex; align-items: flex-end; background: #f7f5f2; overflow: hidden; }
body.page-id-305966.cek-friendly-special .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
body.page-id-305966.cek-friendly-special .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(17,20,18,.82),rgba(17,20,18,.55) 45%,rgba(17,20,18,.06)); pointer-events: none; }
body.page-id-305966.cek-friendly-special .hero-in { width: min(1160px,100%); margin: auto; padding: 60px 24px; color: white; display: flex; flex-direction: column; gap: 16px; }
body.page-id-305966.cek-friendly-special .hero h1 { max-width: 21ch; font-size: clamp(34px,3.25vw,46px); line-height: 1.08; color: white; padding: 0; }
body.page-id-305966.cek-friendly-special .hero-in > p { max-width: 54ch; font-size: 17px; line-height: 1.5; padding: 0; }
body.page-id-305966.cek-friendly-special .hero-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-id-305966.cek-friendly-special .hero-ctas br,
body.page-id-305966.cek-friendly-special .hero-proof br { display: none; }
body.page-id-305966.cek-friendly-special .hero-ctas a { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; min-height: 44px; padding: 10px 18px; font-size: 14px; line-height: 1.25; color: white; border: 1px solid rgba(255,255,255,.7); }
body.page-id-305966.cek-friendly-special .hero-ctas a.light { background: #0064d9; border-color: #0064d9; }
body.page-id-305966.cek-friendly-special .hero-proof { display: flex; flex-wrap: wrap; max-width: 780px; gap: 8px 16px; font-size: 13px; }
@media(max-width:600px) {
 body.page-id-305966.cek-friendly-special .hero { min-height: 0; display: block; }
 body.page-id-305966.cek-friendly-special .hero-bg { height: 290px; }
 body.page-id-305966.cek-friendly-special .hero::after { background: linear-gradient(180deg, transparent 154px,#f7f5f2 252px,#f7f5f2); }
 body.page-id-305966.cek-friendly-special .hero-in { padding: 250px 20px 28px; color: #454943; gap: 12px; }
 body.page-id-305966.cek-friendly-special .hero h1 { order: 1; max-width: none; font-size: 29px; color: #1d1d1f; }
 body.page-id-305966.cek-friendly-special .hero-ctas { order: 2; }
 body.page-id-305966.cek-friendly-special .hero-in > p { order: 3; font-size: 16px; }
 body.page-id-305966.cek-friendly-special .hero-proof { order: 4; font-size: 12.5px; }
 body.page-id-305966.cek-friendly-special .hero-ctas a { flex: 1 1 140px; padding: 10px; text-align: center; }
 body.page-id-305966.cek-friendly-special .hero-ctas a.ghost { color: #1d1d1f; border-color: #93968f; }
}

/*
 * Proposition locale pour la galerie de la page 263557 uniquement.
 * Les six figures, légendes, liens et textes restent dans le HTML d'origine.
 */
body.page-id-263557 #cek-facade .galerie {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  background: #f7f5f1;
}

body.page-id-263557 #cek-facade .gal-grille {
  width: min(100%, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  align-items: start;
}

body.page-id-263557 #cek-facade .gal-item,
body.page-id-263557 #cek-facade .gal-item:first-child,
body.page-id-263557 #cek-facade .gal-item:last-child:nth-child(even) {
  grid-column: span 1;
  min-width: 0;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
}

body.page-id-263557 #cek-facade .gal-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  background: #e9e5de;
  transition: none;
}

body.page-id-263557 #cek-facade .gal-item:last-child img {
  aspect-ratio: 16 / 10;
}

body.page-id-263557 #cek-facade .gal-item:hover img {
  transform: none;
}

body.page-id-263557 #cek-facade .gal-item figcaption {
  position: static;
  padding: 0.9rem 0.1rem 0;
  background: none;
  color: #34332f;
  font-size: 0.94rem;
  line-height: 1.55;
}

body.page-id-263557 #cek-facade .gal-item figcaption b {
  display: block;
  margin: 0 0 0.3rem;
  color: #171715;
  font-size: 1.04rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  body.page-id-263557 #cek-facade .gal-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 560px) {
  body.page-id-263557 #cek-facade .galerie {
    padding: 2.5rem 1rem;
  }

  body.page-id-263557 #cek-facade .gal-grille {
    width: min(100%, 440px);
    grid-template-columns: minmax(0, 1fr);
    gap: 1.7rem;
  }

  body.page-id-263557 #cek-facade .gal-item img,
  body.page-id-263557 #cek-facade .gal-item:last-child img {
    aspect-ratio: 16 / 10;
    max-height: 300px;
  }

  body.page-id-263557 #cek-facade .gal-item figcaption {
    padding-top: 0.7rem;
    font-size: 0.92rem;
  }
}

/* Proposition d’affinage de la page d’accueil, desktop uniquement.
   Le hero et sa photo existants restent plein écran, avec copie posée à gauche. */
@media (min-width: 1025px) {
  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero {
    min-height: clamp(660px, calc(100svh - 84px), 820px);
    align-items: flex-end;
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero::after {
    background:
      linear-gradient(90deg,
        rgba(17, 20, 18, .88) 0%,
        rgba(17, 20, 18, .76) 30%,
        rgba(17, 20, 18, .48) 48%,
        rgba(17, 20, 18, .12) 70%,
        rgba(17, 20, 18, 0) 86%),
      linear-gradient(0deg, rgba(17, 20, 18, .34) 0%, rgba(17, 20, 18, 0) 45%);
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-in {
    max-width: 1320px;
    padding: 0 clamp(44px, 6vw, 84px) 58px;
    gap: 18px;
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero h1 {
    max-width: 19ch;
    font-size: clamp(52px, 4.6vw, 68px);
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-in > p {
    max-width: 54ch;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .96);
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-ctas {
    gap: 14px;
    margin-top: 12px;
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-ctas .btn {
    min-height: 52px;
    padding-inline: 28px;
    font-size: 15.5px;
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-ctas .btn.light {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-ctas .btn.ghost {
    border-color: rgba(255, 255, 255, .68);
    background: rgba(17, 20, 18, .28);
    backdrop-filter: blur(8px);
  }

  body.page-id-305065.cek-friendly-page.cek-friendly-immersive #cek-facade > .hero .hero-proof {
    max-width: 900px;
    gap: 10px 22px;
    margin-top: 16px;
    padding-top: 16px;
    border-top-color: rgba(255, 255, 255, .38);
    font-size: 13.5px;
    color: rgba(255, 255, 255, .92);
  }
}

/* Portes de meubles: preserve the full scene and give each viewport its own hierarchy. */
@media(min-width:1025px){
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero){min-height:clamp(640px,74svh,760px)}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after{background:linear-gradient(90deg,rgba(17,20,18,.96) 0%,rgba(17,20,18,.9) 28%,rgba(17,20,18,.78) 41%,rgba(17,20,18,.22) 59%,rgba(17,20,18,0) 75%)}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in{width:100%;max-width:none;margin-inline:0;padding:40px clamp(28px,4vw,80px);gap:18px;align-items:flex-start;text-align:left}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1{font-size:clamp(36px,3.1vw,50px);max-width:min(42vw,540px);line-height:1.07;letter-spacing:-.035em;text-wrap:balance}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p{max-width:min(39vw,510px);font-size:18px;line-height:1.55;color:#fff}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas{max-width:min(42vw,540px);gap:12px;justify-content:flex-start;flex-wrap:wrap}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof{width:100%;max-width:min(42vw,540px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;font-size:13px;margin-top:8px;padding-top:16px}
}
@media(min-width:601px) and (max-width:1024px){
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero){min-height:620px;align-items:flex-end}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in{width:100%;max-width:none;padding:28px 36px 30px;gap:12px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1{max-width:26ch;font-size:clamp(30px,4vw,36px);line-height:1.08;text-wrap:balance}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p{max-width:65ch;font-size:16px;line-height:1.5}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after{background:linear-gradient(180deg,rgba(17,20,18,0) 8%,rgba(17,20,18,.15) 24%,rgba(17,20,18,.78) 51%,rgba(17,20,18,.95) 100%)}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;font-size:12.5px;margin-top:6px;padding-top:14px}
}
@media(min-width:901px) and (max-width:1024px){
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero){min-height:570px;align-items:center}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in{padding:36px 40px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1{max-width:23ch}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p{max-width:49ch}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof{max-width:550px;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero)::after{background:linear-gradient(90deg,rgba(17,20,18,.9),rgba(17,20,18,.77) 42%,rgba(17,20,18,.18) 76%,rgba(17,20,18,.02))}
}
@media(max-width:600px){
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero){--friendly-photo-height:clamp(300px,82vw,345px)}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) h1{font-size:28px;line-height:1.1;max-width:none;text-wrap:balance}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in{padding:0 20px 26px;gap:13px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas{gap:8px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-ctas .btn{font-size:14px;line-height:1.25;padding:11px 13px;min-height:46px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-in > p{font-size:16px;line-height:1.5}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;font-size:12px;line-height:1.45;padding-top:14px;margin-top:2px}
 body.page-id-252582.cek-friendly-page #cek-facade > .hero:not(.porteco-hero) .hero-proof span:first-child{grid-column:1/-1}
}

/* Hauteurs de façades: show each usage card as an image followed by readable copy. */
@media(min-width:740px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages{padding-bottom:64px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .envie-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env{min-width:0;min-height:0;display:grid;grid-template-rows:260px minmax(0,1fr);align-items:stretch;background:#f4f2ee;color:#20231f}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env>img{position:static;inset:auto;display:block;width:100%;height:260px;min-width:0;object-fit:contain;object-position:center;background:#f4f2ee;z-index:auto;transform:none}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env::after{display:none}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b{min-width:0;max-width:none;padding:24px;background:#f4f2ee;color:#20231f}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b .who{color:#5a5e58}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b h3{font-size:22px;line-height:1.2;color:#20231f}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b p{font-size:15px;line-height:1.5;color:#454943}
}
@media(max-width:739px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages{padding-bottom:64px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .envie-grid{grid-template-columns:1fr;gap:14px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env{min-width:0;min-height:0;display:grid;grid-template-columns:110px minmax(0,1fr);align-items:stretch;background:#f4f2ee;color:#20231f}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env>img{position:static;inset:auto;display:block;width:100%;height:100%;min-height:110px;object-fit:contain;object-position:center;background:#f4f2ee;z-index:auto;transform:none}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env::after{display:none}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b{min-width:0;max-width:none;padding:16px;background:#f4f2ee;color:#20231f;gap:6px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b .who{color:#5a5e58}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b h3{font-size:20px;line-height:1.2;color:#20231f}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b p{font-size:15px;line-height:1.45;color:#454943}
}
@media(max-width:369px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env{grid-template-columns:90px minmax(0,1fr)}
}
@media(min-width:1025px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero){min-height:clamp(640px,74vh,680px);align-items:center}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero)::after{background:linear-gradient(90deg,rgba(17,20,18,.88) 0%,rgba(17,20,18,.76) 32%,rgba(17,20,18,.32) 55%,rgba(17,20,18,0) 72%)}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in{width:42vw;max-width:510px;margin-left:clamp(32px,5vw,80px);margin-right:auto;padding:40px 0;align-items:flex-start;text-align:left;gap:16px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1{max-width:510px;font-size:clamp(38px,3.4vw,48px);line-height:1.06;text-wrap:balance}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in>p{width:100%;max-width:480px}
}
body.page-id-294236.cek-friendly-page.cek-friendly-finish .cek-suite{margin-bottom:clamp(36px,5vw,64px)}

@media(min-width:740px){body.page-id-294236 #cek-facade #usages .who{min-height:34px;display:block}}
@media(min-width:1025px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) h1,
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-in>p{text-align:left;margin-inline:0}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-ctas,
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade > .hero:not(.porteco-hero) .hero-proof{justify-content:flex-start;text-align:left}
}

body.page-id-294236 #cek-facade #usages .height-card-cta{display:block;margin-top:auto;padding-top:16px;font-size:14px;line-height:1.4;font-weight:600;color:#00616a;text-decoration:underline;text-underline-offset:4px}
body.page-id-294236 #cek-facade #usages .env:focus-visible{outline:3px solid #00616a;outline-offset:5px}
body.page-id-294236 #cek-facade #usages .env-b{height:100%}
@media(max-width:739px){
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env{padding:18px;grid-template-columns:100px minmax(0,1fr);gap:8px 16px;align-items:center}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env>img{grid-column:1;grid-row:1/3;width:100px;height:112px;min-height:0;border-radius:10px}
 body.page-id-294236.cek-friendly-page.cek-friendly-finish #cek-facade #usages .env-b{display:contents}
 body.page-id-294236 #cek-facade #usages .who{grid-column:2;grid-row:1;align-self:end;min-height:0}
 body.page-id-294236 #cek-facade #usages h3{grid-column:2;grid-row:2;align-self:start}
 body.page-id-294236 #cek-facade #usages .env-b p{grid-column:1/-1;grid-row:3;margin-top:8px}
 body.page-id-294236 #cek-facade #usages .height-card-cta{grid-column:1/-1;grid-row:4;padding-top:8px}
}

/* Mobalpa and Hygena: turn the pre-order check into three clear next steps. */
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander.controle{padding:80px 24px;background:#f4f2ee;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px 48px;align-items:start}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head{grid-column:1;max-width:none;margin:0}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head h2{font-size:clamp(36px,3.4vw,42px);line-height:1.08;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head p{font-size:16px;line-height:1.55;color:#454943;opacity:1}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-routes{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route{min-width:0;padding:22px;border:1px solid #d7d5ce;border-radius:16px;background:#fff;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route h3{margin:0 0 10px;font-size:22px;line-height:1.2;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route p{margin:0 0 16px;font-size:16px;line-height:1.5;color:#454943}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route a{font-size:15px;line-height:1.4;font-weight:600}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;padding:26px;background:#173d50;color:#fff}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary h3,
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary p{color:#fff}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:auto;padding:12px 20px;border:1px solid #fff;border-radius:999px;background:#fff;color:#173d50;text-decoration:none}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary a.btn:hover{background:#e8f1f5;color:#102f3d}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route a:focus-visible{outline:3px solid #0071ce;outline-offset:3px}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary a.btn:focus-visible{outline:3px solid #ffcf65;outline-offset:3px}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-prep{grid-column:1/-1;margin-top:8px;padding-top:24px;border-top:1px solid #cbc8c0;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-prep h3{margin:0 0 12px;font-size:20px;line-height:1.25;color:#20231f}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-prep ul{margin:0;padding-left:22px;color:#454943}
body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-prep li{padding:3px 0;font-size:16px;line-height:1.5}
@media(min-width:740px) and (max-width:1024px){
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander.controle{padding:64px 32px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head{grid-column:1/-1}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-routes{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary{grid-column:1/-1}
}
@media(max-width:739px){
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander.controle{padding:56px 24px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .wrap{grid-template-columns:minmax(0,1fr);gap:22px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head{grid-column:1}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .s-head h2{font-size:clamp(32px,8vw,38px)}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-routes{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr);gap:14px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route,
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-primary{padding:20px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-route h3{font-size:21px}
 body.page-id-313650.cek-friendly-page #cek-facade #avant-de-commander .mh-prep{margin-top:0;padding-top:20px}
}
body.page-id-313650 #cek-facade #charnieres{padding-bottom:clamp(48px,6vw,80px)}
body.page-id-313650 #cek-facade #avant-de-commander .wrap{width:100%;padding-inline:0}
body.page-id-313650 #cek-facade #avant-de-commander .mh-route{display:flex;flex-direction:column}
body.page-id-313650 #cek-facade #avant-de-commander .mh-route>a{margin-top:auto}
body.page-id-313650 #cek-facade #avant-de-commander .btn{white-space:normal;text-align:center;max-width:100%}