/* UX des pages Cekonay. Portee : #cek-facade uniquement.
Repris de cuisine.cekonay.com. Aucune regle ne sort de ce conteneur. */
#cek-facade{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip}
#cek-facade p{padding-bottom:0}
#cek-facade a{color:inherit}
#cek-facade .link,#cek-facade .help-row b{color:var(--blue-link)}
#cek-facade img{border-radius:0}
#cek-facade h1,#cek-facade h2,#cek-facade h3{padding-bottom:0}
#cek-facade{--ink:#1d1d1f;--muted:#6B6764;--paper:#fff;--mist:#F7F5F2;--line:#E7E3DE;--blue:#0071e3;--blue-link:#0062C4;--accent:#147d89;--accent-on-dark:#69c96e;--night:#161514;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
#cek-facade *{box-sizing:border-box}
#cek-facade img{display:block;max-width:100%;height:auto}
#cek-facade h2,#cek-facade h3{font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance}
#cek-facade p{margin:0}
#cek-facade a{text-decoration:none}
#cek-facade .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
#cek-facade .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;color:var(--accent);text-transform:uppercase;display:block}
#cek-facade .s-head{max-width:44ch;display:flex;flex-direction:column;gap:12px;margin-bottom:38px}
#cek-facade .s-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1}
#cek-facade .s-head p{font-size:16.5px;color:var(--muted);max-width:56ch}
#cek-facade .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;background:var(--blue);color:#fff;font-size:16px;font-weight:600;padding:0 26px;border-radius:980px;border:none;cursor:pointer;transition:background .18s}
#cek-facade .btn:hover{background:#0077ed}
#cek-facade .btn.light{background:#fff;color:var(--ink)}
#cek-facade .btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);color:#fff}
#cek-facade .link{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-link);font-weight:500;font-size:15.5px}
#cek-facade .prose{display:flex;flex-direction:column;gap:16px;max-width:68ch;font-size:16.5px}
#cek-facade .prose strong{font-weight:600}
#cek-facade section{position:relative}
/* hero */
#cek-facade .hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
#cek-facade .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cek-facade .poseur-hero .hero-bg{object-position:center 25%}
#cek-facade .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,10,.92) 0%,rgba(14,12,10,.74) 26%,rgba(14,12,10,.32) 54%,rgba(14,12,10,0) 100%)}
#cek-facade .hero-in{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:0 24px 56px;display:flex;flex-direction:column;gap:16px}
#cek-facade .hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.05;margin:0;max-width:22ch;font-weight:600;letter-spacing:-.03em;color:#fff;text-wrap:balance}
#cek-facade .hero p{font-size:clamp(16.5px,1.7vw,20px);max-width:52ch;color:rgba(255,255,255,.94)}
#cek-facade .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
#cek-facade .hero-proof{display:flex;gap:10px 22px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.3);padding-top:18px;margin-top:14px;font-size:14.5px}
#cek-facade .hero-proof b{font-weight:600}
#cek-facade .porteco-hero{align-items:center;background:linear-gradient(110deg,#182020 0%,#243030 48%,#6f8487 100%)}
#cek-facade .porteco-hero-media{position:absolute;inset:0 0 0 auto;width:min(58vw,760px);height:100%;display:flex;align-items:center;justify-content:flex-end}
#cek-facade .porteco-hero-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center}
#cek-facade .porteco-hero::after{background:linear-gradient(90deg,rgba(14,17,17,.97) 0%,rgba(14,17,17,.9) 36%,rgba(14,17,17,.52) 58%,rgba(14,17,17,.08) 100%)}
#cek-facade .porteco-hero .hero-in{padding-top:64px}
#cek-facade .porteco-hero h1{max-width:17ch}
#cek-facade .porteco-hero .hero-in>p{max-width:47ch}
/* reponse directe */
#cek-facade .answer{padding:80px 0 0}
#cek-facade .answer-card{background:var(--mist);border-radius:24px;padding:40px 42px;display:flex;flex-direction:column;gap:18px}
#cek-facade .answer-card h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15}
#cek-facade .answer-card p.answer-yes{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.03em;color:var(--accent);line-height:1}
#cek-facade .answer-brand{color:var(--blue-link)}
#cek-facade .answer-card p{font-size:16.5px;max-width:66ch}
#cek-facade .answer-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#cek-facade .answer-list span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:14px}
#cek-facade .price-example{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;margin-top:8px;padding:22px 24px;border:1px solid #d8e4e6;border-radius:18px;background:#fff}
#cek-facade .price-example-k{grid-column:1/-1;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
#cek-facade .price-example p{max-width:58ch;font-size:16px;line-height:1.5}
#cek-facade .price-example p b{white-space:nowrap}
#cek-facade .price-example .link{justify-self:end;white-space:nowrap}
@media(max-width:700px){
#cek-facade .price-example{grid-template-columns:1fr;padding:20px}
#cek-facade .price-example-k{grid-column:auto}
#cek-facade .price-example .link{justify-self:start;white-space:normal}
}
#cek-facade .answer--media .answer-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:28px;align-items:start}
#cek-facade .answer--media .wrap{margin-bottom:54px}
#cek-facade .answer--media .answer-copy{display:flex;flex-direction:column;gap:18px}
#cek-facade .answer-video{margin:0;max-width:520px;justify-self:end;background:var(--night);border-radius:20px;overflow:hidden}
#cek-facade .answer-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
#cek-facade .answer-video figcaption{padding:18px 20px 20px;color:#fff}
#cek-facade .answer-video figcaption b{display:block;font-size:17px;line-height:1.3;margin-bottom:6px}
#cek-facade .answer-video figcaption span{display:block;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}
/* grille de choix */
#cek-facade .envie{padding:88px 0 0}
#cek-facade .envie-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
#cek-facade .env{position:relative;border-radius:22px;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
#cek-facade .env img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
#cek-facade .env::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,12,10,.92) 0%,rgba(14,12,10,.55) 42%,rgba(14,12,10,.1) 80%)}
#cek-facade .env:hover img{transform:scale(1.035)}
#cek-facade .env-b{position:relative;z-index:1;padding:30px;max-width:46ch;display:flex;flex-direction:column;gap:7px}
#cek-facade .env-b .who{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
#cek-facade .env-b h3{font-size:25px;line-height:1.2;color:#fff}
#cek-facade .env-b p{font-size:15.5px;color:rgba(255,255,255,.9)}
#cek-facade .pro-entry-cta{display:inline-flex;align-items:center;gap:10px;width:max-content;margin-top:10px;color:#fff;font-size:14px;font-weight:650}
#cek-facade .pro-entry-cta>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink);font-size:22px;line-height:1;transition:transform .18s,background .18s}
#cek-facade .pro-entries .env:hover .pro-entry-cta>span,#cek-facade .pro-entries .env:focus-visible .pro-entry-cta>span{transform:translateX(3px);background:#f2f2f2}
#cek-facade .pro-entries .env>img,#cek-facade .pro-entries .env::after{pointer-events:none}
/* finitions */
#cek-facade .fin{padding:88px 0 0}
#cek-facade .fin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(min-width:901px){#cek-facade .fin-grid>.fin-card:nth-child(3):last-child{grid-column:1/-1;width:calc((100% - 18px)/2);justify-self:center}}
#cek-facade .fin-card{border:1px solid var(--line);border-radius:20px;padding:26px 28px;display:flex;flex-direction:column;gap:10px;background:#fff}
#cek-facade .fin-card .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
#cek-facade .fin-card h3{font-size:22px}
#cek-facade .fin-card p{font-size:15.5px;color:var(--muted)}
#cek-facade .fin-spec{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-top:2px}
#cek-facade .fin-spec span{background:var(--mist);border-radius:8px;padding:5px 10px;font-size:12.5px;color:var(--ink);white-space:nowrap;flex:0 0 auto}
#cek-facade .fin-spec .link{display:inline;min-height:0;padding:0;background:transparent;border-radius:0;font-size:inherit;line-height:inherit;white-space:nowrap}
/* sombre : marques */
#cek-facade .marques{padding:88px 0 0}
#cek-facade .marques-in{background:var(--night);color:#F5F3F0;border-radius:28px;padding:56px 48px}
#cek-facade .marques-in .eyebrow{color:var(--accent-on-dark)}
#cek-facade .marques-in h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1;color:#fff;max-width:20ch;margin:12px 0 16px}
#cek-facade .marques-in p{color:#C6C2BD;max-width:66ch;font-size:16.5px}
#cek-facade .marques-in p b{color:#fff;font-weight:600}
#cek-facade .marque-list{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 22px}
#cek-facade .marque-list span{border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:8px 15px;font-size:14px;color:#E9E6E2}
#cek-facade p.cek-legal{font-size:13px;color:#9A948E;margin-top:20px;max-width:76ch;line-height:1.5}
/* budget */
#cek-facade .budget{padding:88px 0 0}
#cek-facade .budget-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
#cek-facade .avoid{display:flex;flex-direction:column;gap:12px;margin-top:6px}
#cek-facade .avoid div{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--muted)}
#cek-facade .avoid i{width:20px;height:20px;border-radius:50%;background:var(--mist);color:var(--accent);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;margin-top:2px}
/* percage */
#cek-facade .perc{padding:88px 0 0}
#cek-facade .perc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#cek-facade .p-card{background:var(--mist);border-radius:20px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:8px}
#cek-facade .p-card .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
#cek-facade .p-card .big{font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#cek-facade .p-card h3{font-size:17px;line-height:1.35}
#cek-facade .p-card p{font-size:14.5px;color:var(--muted)}
/* produits */
/* limite : fond teinte, aucun filet, la typographie fait le travail */
#cek-facade .limite{padding:112px 0;background:var(--mist);margin-top:88px}
#cek-facade .lim-head{max-width:34ch;margin:0 auto 62px;text-align:center;display:flex;flex-direction:column;gap:18px}
#cek-facade .lim-head h2{font-size:clamp(31px,4.1vw,50px);line-height:1.06;letter-spacing:-.035em}
#cek-facade .lim-head p{font-size:19px;line-height:1.5;color:var(--muted)}
#cek-facade .lim-duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:840px;margin:0 auto 62px}
#cek-facade .lim-col{display:flex;flex-direction:column;gap:16px}
#cek-facade .lim-k{font-size:20px;font-weight:600;letter-spacing:-.02em}
#cek-facade .lim-k-oui{color:var(--accent)}
#cek-facade .lim-k-non{color:#9C4A3C}
#cek-facade .lim-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
#cek-facade .lim-col li{font-size:16.5px;line-height:1.5;color:var(--muted);padding-top:13px;border-top:1px solid var(--line)}
#cek-facade .lim-test{max-width:640px;margin:0 auto;background:var(--paper);border-radius:28px;padding:46px 46px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
#cek-facade .lim-test-k{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
#cek-facade .lim-test-p{font-size:17px;line-height:1.55;color:var(--muted);max-width:44ch}
#cek-facade .lim-test-v{font-size:22px;line-height:1.45;letter-spacing:-.02em;max-width:36ch}
#cek-facade .lim-test-v b{font-weight:600;color:var(--accent)}
#cek-facade .lim-test .link{margin-top:4px}
#cek-facade .pont{max-width:640px;margin:52px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
#cek-facade .pont-q{font-size:21px;font-weight:600;letter-spacing:-.02em}
#cek-facade .pont-p{font-size:16.5px;line-height:1.55;color:var(--muted);max-width:52ch}
#cek-facade .pont-lien{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--blue-link);font-weight:500;font-size:16.5px}
@media (max-width:820px){
#cek-facade .poseur-hero .hero-bg{object-position:66% center}
#cek-facade .limite{padding:72px 0;margin-top:60px}
#cek-facade .lim-duo{grid-template-columns:1fr;gap:34px;margin-bottom:44px}
#cek-facade .lim-head{margin-bottom:44px}
#cek-facade .lim-test{padding:34px 24px 30px;border-radius:22px}
}
#cek-facade .prod{padding:88px 0 0}
#cek-facade .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
#cek-facade .pc{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
#cek-facade .pc img{width:100%;aspect-ratio:1;object-fit:cover}
#cek-facade .pc-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
#cek-facade .pc-b h3{font-size:15px;line-height:1.35;flex:1}
#cek-facade .pc-b .price{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#cek-facade .pc-b .price small{font-size:13px;font-weight:400;color:var(--muted)}
/* devis */
#cek-facade .devis{padding:88px 0 0}
#cek-facade .devis-in{background:var(--mist);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:0}
#cek-facade .devis-copy{padding:48px 44px;display:flex;flex-direction:column;gap:14px}
#cek-facade .devis-copy h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15}
#cek-facade .devis-copy p{font-size:16.5px;color:var(--muted);max-width:46ch}
#cek-facade .devis-media img{width:100%;height:100%;object-fit:cover}
/* final */
#cek-facade .final{padding:96px 24px 92px;text-align:center}
#cek-facade .final-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
#cek-facade .final h2{font-size:clamp(28px,4.2vw,48px);line-height:1.07;max-width:17ch}
#cek-facade .final p{font-size:17px;color:var(--muted);max-width:52ch}
#cek-facade .final .btn{margin-top:10px;min-width:220px}
#cek-facade .help{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px;width:100%;margin-top:22px}
#cek-facade .help-row{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:78px;justify-content:center;padding:12px 18px;border:1px solid var(--line);border-radius:14px;transition:background .18s}
#cek-facade .help-row:hover{background:var(--mist)}
#cek-facade .help-row b{font-size:17px;font-weight:600;color:var(--blue-link)}
#cek-facade .help-row span{font-size:14px;color:var(--muted)}
#cek-facade a:focus-visible,#cek-facade button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
@media (max-width:1000px){
#cek-facade .prod-grid{grid-template-columns:repeat(2,1fr)}
#cek-facade .devis-in{grid-template-columns:1fr}
#cek-facade .devis-copy{padding:36px 28px}
#cek-facade .porteco-hero-media{width:66vw}
#cek-facade .porteco-hero::after{background:linear-gradient(90deg,rgba(14,17,17,.97) 0%,rgba(14,17,17,.9) 48%,rgba(14,17,17,.3) 100%)}
}
@media (max-width:900px){
#cek-facade .envie-grid,#cek-facade .fin-grid,#cek-facade .perc-grid,#cek-facade .budget-grid{grid-template-columns:1fr}
#cek-facade .budget-grid{gap:32px}
#cek-facade .env{min-height:0;display:block;background:#fff;border:1px solid var(--line);color:var(--ink)}
#cek-facade .env img{position:static;height:230px;z-index:0}
#cek-facade .env::after{display:none}
#cek-facade .env-b{padding:18px 20px 22px;max-width:none}
#cek-facade .env-b .who{color:var(--accent)}
#cek-facade .env-b h3{font-size:22px;color:var(--ink)}
#cek-facade .env-b p{color:var(--muted)}
#cek-facade .pro-entry-cta{color:var(--blue-link)}
#cek-facade .pro-entry-cta>span{background:var(--blue);color:#fff}
#cek-facade .marques-in{padding:38px 24px;border-radius:22px}
#cek-facade .answer-card{padding:30px 24px}
#cek-facade .answer--media .answer-card{grid-template-columns:1fr;gap:20px}
#cek-facade .answer--media .wrap{margin-bottom:36px}
#cek-facade .answer-video{max-width:none;justify-self:stretch}
#cek-facade .hero{min-height:80vh}
#cek-facade .hero-in{padding-bottom:32px}
#cek-facade .hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:12.5px}
#cek-facade .answer,#cek-facade .envie,#cek-facade .fin,#cek-facade .marques,#cek-facade .budget,#cek-facade .perc,#cek-facade .limite,#cek-facade .prod,#cek-facade .devis{padding-top:60px}
#cek-facade .help{grid-template-columns:1fr;max-width:360px}
}
@media (max-width:560px){#cek-facade .prod-grid{grid-template-columns:1fr}#cek-facade .answer--media .wrap{margin-bottom:28px}}
@media (max-width:700px){
#cek-facade .porteco-hero{align-items:flex-end;background:#182020}
#cek-facade .porteco-hero-media{inset:0 0 auto;width:100%;height:52%}
#cek-facade .porteco-hero-media img{object-position:center top}
#cek-facade .porteco-hero::after{background:linear-gradient(to top,rgba(14,17,17,.99) 0%,rgba(14,17,17,.94) 46%,rgba(14,17,17,.34) 76%,rgba(14,17,17,.05) 100%)}
#cek-facade .porteco-hero .hero-in{padding-top:180px}
#cek-facade .porteco-hero h1{max-width:18ch}
}
@media (prefers-reduced-motion:reduce){#cek-facade *{transition:none!important;animation:none!important}}
/* Page echantillons (308117) : conserver une lecture nette sur la photographie. */
body.page-id-308117 #cek-facade .matter .wrap{max-width:952px;margin:0 auto;padding:0 24px}
body.page-id-308117 #cek-facade .hero .eyebrow{color:#a7e6ed}
body.page-id-308117 #cek-facade .sample-phone .cekonay-phone-hours{margin-top:2px;color:var(--muted)}
body.page-id-308117 #cek-facade .guides .g{display:flex;min-height:146px;flex-direction:column;gap:9px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);transition:border-color .18s,transform .18s}
body.page-id-308117 #cek-facade .guides .g:hover{border-color:var(--accent);transform:translateY(-2px)}
body.page-id-308117 #cek-facade .guides .g .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--accent);text-transform:uppercase}
body.page-id-308117 #cek-facade .guides .g h3{font-size:19px;line-height:1.3}
@media(min-width:901px){body.page-id-308117 #cek-facade .faq{padding-bottom:64px}}
@media(max-width:900px){body.page-id-308117 #cek-facade .faq{padding-bottom:48px}}
@media(max-width:700px){
body.page-id-308117 #cek-facade .hero{min-height:auto;padding-top:clamp(238px,76vw,300px);background:#161514}
body.page-id-308117 #cek-facade .hero .hero-bg{inset:0 0 auto;height:clamp(258px,82vw,322px);object-position:55% 42%}
body.page-id-308117 #cek-facade .hero::after{background:linear-gradient(to bottom,rgba(14,12,10,.02) 0%,rgba(14,12,10,.12) 24%,rgba(14,12,10,.96) 48%,#161514 100%)}
body.page-id-308117 #cek-facade .hero-in{padding-top:38px;padding-bottom:42px}
}
@media(min-width:701px) and (max-width:1024px){
body.page-id-308117 #cek-facade .hero{min-height:72vh}
body.page-id-308117 #cek-facade .hero .hero-bg{object-position:58% 42%}
}
@media(max-width:700px) and (orientation:landscape) and (max-height:500px){
body.page-id-308117 #cek-facade .hero{padding-top:190px}
body.page-id-308117 #cek-facade .hero .hero-bg{height:214px;object-position:55% 38%}
body.page-id-308117 #cek-facade .hero-in{padding-top:28px}
}
/* Modalites de livraison : illustration editoriale et lecture logistique. */
#cek-facade .livraison-hero{padding:clamp(54px,7vw,96px) 0 24px;background:var(--mist)}
#cek-facade .livraison-hero-grid{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:center}
#cek-facade .livraison-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#cek-facade .livraison-hero h1{margin:0;max-width:15ch;font-size:clamp(34px,4.8vw,58px);line-height:1.03;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
#cek-facade .livraison-hero-copy>p{max-width:51ch;font-size:clamp(17px,1.55vw,20px);color:var(--muted)}
#cek-facade .livraison-hero .ghost-dark{background:transparent;border:1px solid #b8b3ad;color:var(--ink)}
#cek-facade .livraison-hero .ghost-dark:hover{background:#fff;border-color:#8c8781}
#cek-facade .livraison-proof{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
#cek-facade .livraison-proof span{display:inline-flex;align-items:center;gap:8px}
#cek-facade .livraison-proof span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
#cek-facade .livraison-hero-media{margin:0;overflow:hidden;border-radius:26px;background:#fff}
#cek-facade .livraison-hero-media img{width:100%;aspect-ratio:1.92/1;object-fit:cover}
#cek-facade .livraison-modes{grid-template-columns:repeat(3,minmax(0,1fr))}
#cek-facade .livraison-attention{align-self:stretch;background:var(--night);color:#fff;border-radius:24px;padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;justify-content:center;gap:16px}
#cek-facade .livraison-attention .eyebrow{color:var(--accent-on-dark)}
#cek-facade .livraison-attention h3{font-size:clamp(23px,2.7vw,34px);line-height:1.12;color:#fff}
#cek-facade .livraison-attention p{color:#c6c2bd;font-size:16px}
#cek-facade .livraison-reprise .cmp td:not(:first-child){font-variant-numeric:tabular-nums}
#cek-facade .legal{padding:88px 0 96px}
#cek-facade .legal-list{max-width:none}
#cek-facade .legal-verbatim-copy{max-width:900px;margin:0 auto;color:var(--ink);font-size:15.5px;line-height:1.75}
#cek-facade .legal-verbatim-copy h2{margin:48px 0 18px;font-size:clamp(25px,3vw,36px);line-height:1.15;letter-spacing:-.025em}
#cek-facade .legal-verbatim-copy h2:first-child{margin-top:0}
#cek-facade .legal-verbatim-copy h3{margin:34px 0 14px;font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.015em}
#cek-facade .legal-verbatim-copy h4{margin:26px 0 12px;font-size:17px;line-height:1.35}
#cek-facade .legal-verbatim-copy p,#cek-facade .legal-verbatim-copy li{margin-bottom:14px}
#cek-facade .legal-verbatim-copy a{color:var(--blue-link);text-decoration:underline;text-underline-offset:3px}
#cek-facade .legal-verbatim-copy ol,#cek-facade .legal-verbatim-copy ul{padding-left:24px;margin:0 0 28px}
#cek-facade .legal-verbatim-copy table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
#cek-facade .legal-verbatim-copy th,#cek-facade .legal-verbatim-copy td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
#cek-facade .legal-verbatim-copy th{background:var(--mist);font-weight:700}
#cek-facade .legal-opening-guide{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:18px;margin:24px 0 30px}
#cek-facade .legal-opening-guide figure{margin:0}
#cek-facade .legal-opening-guide img{display:block;width:100%;height:auto;aspect-ratio:500/691;object-fit:cover;border-radius:16px;background:var(--mist)}
#cek-facade .legal-opening-guide figcaption{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
#cek-facade .legal-copy{display:flex;flex-direction:column;gap:14px}
#cek-facade .legal-copy p{font-size:15.5px;line-height:1.65;color:var(--muted);max-width:86ch}
#cek-facade .legal-copy strong{color:var(--ink);font-weight:600}
@media(max-width:900px){
#cek-facade .livraison-hero{padding-top:52px}
#cek-facade .livraison-hero-grid{grid-template-columns:1fr}
#cek-facade .livraison-hero h1{max-width:19ch}
#cek-facade .livraison-hero-media{border-radius:20px}
#cek-facade .livraison-modes{grid-template-columns:1fr}
#cek-facade .legal{padding:60px 0 72px}
}
@media(max-width:600px){
#cek-facade .livraison-hero{padding:40px 0 8px}
#cek-facade .livraison-hero-grid{gap:26px}
#cek-facade .livraison-hero .hero-ctas{width:100%}
#cek-facade .livraison-hero .btn{width:100%}
#cek-facade .livraison-proof{display:grid;grid-template-columns:1fr}
#cek-facade .livraison-hero-media{margin:0 -24px;border-radius:0}
#cek-facade .livraison-hero-media img{aspect-ratio:1.92/1;object-fit:contain}
#cek-facade .legal-opening-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
#cek-facade .etapes{padding:88px 0 0}
#cek-facade .etp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
#cek-facade .etp{display:flex;flex-direction:column;gap:9px}
#cek-facade .etp .n{width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
#cek-facade .etp h3{font-size:18px;line-height:1.3}
#cek-facade .etp p{font-size:15px;color:var(--muted)}
/* Page renovation rustique : la preuve visuelle accompagne la grille de
comparaison sans charger l image avant son approche de l ecran. */
body.page-id-293501 #cek-facade .comparer-rustique{
padding:88px 0;
background:var(--mist);
}
body.page-id-293501 #cek-facade .comparer-intro{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:48px;
align-items:center;
margin-bottom:44px;
}
body.page-id-293501 #cek-facade .comparer-intro .s-head{margin-bottom:0}
body.page-id-293501 #cek-facade .comparer-visuel{
position:relative;
margin:0;
overflow:hidden;
border-radius:20px;
background:#dedbd6;
box-shadow:0 18px 46px rgba(28,31,29,.12);
}
body.page-id-293501 #cek-facade .comparer-visuel picture,
body.page-id-293501 #cek-facade .comparer-visuel img{display:block;width:100%}
body.page-id-293501 #cek-facade .comparer-visuel img{height:auto;aspect-ratio:4/3;object-fit:cover}
body.page-id-293501 #cek-facade .comparer-label{
position:absolute;
top:14px;
padding:6px 11px;
border-radius:99px;
background:rgba(14,12,10,.72);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
line-height:1;
text-transform:uppercase;
}
body.page-id-293501 #cek-facade .comparer-label-avant{left:14px}
body.page-id-293501 #cek-facade .comparer-label-apres{right:14px}
#cek-facade .faq{padding:88px 0 0}
#cek-facade .faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:90ch}
#cek-facade .q{border-bottom:1px solid var(--line)}
#cek-facade .q>summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-size:17.5px;font-weight:600;letter-spacing:-.01em;position:relative}
#cek-facade .q>summary::-webkit-details-marker{display:none}
#cek-facade .q>summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--accent);line-height:1}
#cek-facade .q[open]>summary::after{content:"−"}
#cek-facade .q>summary:hover{color:var(--accent)}
#cek-facade .q>div{padding:0 44px 24px 0}
#cek-facade .q>div p{font-size:16px;color:var(--muted);max-width:76ch}
@media (max-width:900px){
#cek-facade .etp-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
#cek-facade .etapes,#cek-facade .faq{padding-top:60px}
#cek-facade .q>summary{font-size:16.5px}
body.page-id-293501 #cek-facade .comparer-rustique{padding:60px 0}
body.page-id-293501 #cek-facade .comparer-intro{gap:28px;margin-bottom:36px}
}
@media (max-width:700px){
body.page-id-293501 #cek-facade .comparer-intro{grid-template-columns:1fr}
}
@media (max-width:560px){
#cek-facade .etp-grid{grid-template-columns:1fr}
body.page-id-293501 #cek-facade .comparer-rustique{padding:48px 0}
body.page-id-293501 #cek-facade .comparer-intro{gap:24px;margin-bottom:32px}
body.page-id-293501 #cek-facade .comparer-visuel{border-radius:16px;box-shadow:0 12px 32px rgba(28,31,29,.11)}
}
/* blocs par enseigne : adressables, sans encadrement, filet haut seulement */
#cek-facade .ens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 48px}
#cek-facade .ens{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
#cek-facade .ens h3{font-size:21px;letter-spacing:-.02em}
#cek-facade .ens p{font-size:16px;line-height:1.55;color:var(--muted);max-width:52ch}
#cek-facade .ens-v{font-size:15px;color:var(--ink)}
#cek-facade .ens-v b{font-weight:600;color:var(--accent)}
#cek-facade .ens .link{margin-top:-2px}
@media (max-width:820px){#cek-facade .ens-grid{grid-template-columns:1fr;gap:30px}}
/* blog : les cartes deviennent cliquables */
#cek-facade a.fin-card{text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
#cek-facade a.fin-card:hover{border-color:var(--accent);transform:translateY(-2px)}
#cek-facade .hero-doc{padding:96px 0 8px}
#cek-facade .hero-doc h1{font-size:clamp(32px,4.4vw,52px);line-height:1.06;letter-spacing:-.035em;font-weight:600;margin:0 0 16px;max-width:20ch}
#cek-facade .hero-doc-lead{font-size:19px;line-height:1.5;color:var(--muted);max-width:60ch}
/* Video ------------------------------------------------------- */
#cek-facade .film{padding:72px 0}
#cek-facade .film-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
#cek-facade .film-v{margin:0;background:var(--cek-surface,#f5f5f7);border-radius:18px;overflow:hidden}
#cek-facade .film-v video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
#cek-facade .film-v figcaption{padding:18px 20px 22px;display:block}
#cek-facade .film-v figcaption strong{display:block;font-size:17px;line-height:1.3;margin-bottom:6px}
#cek-facade .film-v figcaption span{display:block;font-size:14.5px;line-height:1.5;opacity:.72}
@media(max-width:600px){#cek-facade .film{padding:48px 0}#cek-facade .film-grid{gap:20px}}
/* Trouver un poseur : alternative autonome, sans video pleine largeur. */
body.page-id-285242 #cek-facade #poseur-kit{padding:clamp(58px,7vw,84px) 0;background:var(--mist)}
body.page-id-285242 #cek-facade .poseur-kit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:1080px;margin:0 auto}
body.page-id-285242 #cek-facade .poseur-kit-copy h2{margin:12px 0 18px;max-width:15ch}
body.page-id-285242 #cek-facade .poseur-kit-copy p{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 14px}
body.page-id-285242 #cek-facade .poseur-kit-copy .btn{margin-top:10px}
body.page-id-285242 #cek-facade #poseur-kit{margin-top:clamp(28px,5vw,64px)}
body.page-id-285242 #cek-facade .poseur-kit-video{margin:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 16px 42px rgba(20,20,24,.09)}
body.page-id-285242 #cek-facade .poseur-kit-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#151515}
body.page-id-285242 #cek-facade .poseur-kit-video figcaption{padding:16px 18px 19px}
body.page-id-285242 #cek-facade .poseur-kit-video strong,body.page-id-285242 #cek-facade .poseur-kit-video span{display:block}
body.page-id-285242 #cek-facade .poseur-kit-video strong{font-size:16px;line-height:1.35;margin-bottom:4px}
body.page-id-285242 #cek-facade .poseur-kit-video span{font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:820px){body.page-id-285242 #cek-facade .poseur-kit-grid{grid-template-columns:1fr;max-width:680px}body.page-id-285242 #cek-facade .poseur-kit-copy h2{max-width:none}}
@media(max-width:600px){body.page-id-285242 #cek-facade #poseur-kit{padding:48px 0}body.page-id-285242 #cek-facade .poseur-kit-grid{gap:28px}body.page-id-285242 #cek-facade .poseur-kit-copy .btn{width:100%}body.page-id-285242 #cek-facade .poseur-kit-video{border-radius:16px}}
/* Page 404 --------------------------------------------------------------
Trois paliers : telephone d abord, puis tablette, puis grand ecran.
La grille passe de une a deux puis trois colonnes ; rien n est fixe en
pixels sur les textes, tout suit clamp() pour rester lisible partout. */
#cek-facade.cek-404{padding:0}
#cek-facade .e404-in{width:min(1080px,92%);margin:0 auto}
#cek-facade .e404{padding:clamp(48px,9vw,110px) 0 clamp(28px,5vw,52px)}
/* La pastille « Erreur 404 » est TOUJOURS posee sur l image : une seule
definition d aspect ici, les points de bascule ne changent que sa place.
Deux valeurs de fond, .72 sur telephone et .62 sur ordinateur, avaient
diverge : le blanc y perdait du contraste. Constate le 17 septembre 2026. */
#cek-facade.cek-404 .e404-visuel{position:relative}
#cek-facade.cek-404 .e404-visuel .e404-code{position:absolute;z-index:3;margin:0;
padding:7px 12px;background:rgba(12,14,16,.78);color:#fff;opacity:1;
font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#cek-facade .e404 h1{font-size:clamp(30px,6.4vw,58px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;max-width:16ch}
#cek-facade .e404-lead{font-size:clamp(16px,2.2vw,20px);line-height:1.55;opacity:.78;max-width:58ch;margin:0 0 32px}
#cek-facade .e404-pistes{padding:0 0 clamp(56px,9vw,110px)}
#cek-facade .e404-pistes h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 22px;letter-spacing:-.01em}
#cek-facade .e404-pistes h3{font-size:clamp(17px,2.4vw,21px);margin:44px 0 16px;opacity:.85}
#cek-facade .e404-grid{display:grid;grid-template-columns:1fr;gap:16px}
#cek-facade .e404-carte{display:block;padding:24px;border-radius:18px;text-decoration:none;color:inherit;
background:var(--cek-surface,#f5f5f7);border:1px solid transparent;transition:border-color .2s,transform .2s}
#cek-facade .e404-carte:hover{border-color:var(--cek-bordure,rgba(128,128,128,.35));transform:translateY(-2px)}
#cek-facade .e404-k{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:50%;font-size:14px;font-weight:700;margin-bottom:14px;
background:var(--cek-accent,#1d1d1f);color:var(--cek-sur-accent,#fff)}
#cek-facade .e404-carte strong{display:block;font-size:19px;margin-bottom:6px}
#cek-facade .e404-carte span:last-child{display:block;font-size:15px;line-height:1.5;opacity:.72}
#cek-facade .e404-liens{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:2px}
#cek-facade .e404-liens li{margin:0}
#cek-facade .e404-liens a{display:block;padding:13px 2px;font-size:16px;text-decoration:none;color:inherit;
border-bottom:1px solid var(--cek-bordure,rgba(128,128,128,.18))}
#cek-facade .e404-liens a:hover{opacity:.6}
#cek-facade .e404-aide{margin-top:32px;font-size:15px;line-height:1.6;opacity:.75}
/* L accroche s adapte a la largeur. Courte sur telephone, moyenne des la
tablette. Les deux paragraphes vivent dans 404.php ; celui qui ne sert pas
est en display:none, donc retire de l arbre d accessibilite : un lecteur
d ecran n en annonce qu un seul. */
#cek-facade .e404-lead[data-lead="moyen"]{display:none}
@media(min-width:700px){
#cek-facade .e404-lead[data-lead="court"]{display:none}
#cek-facade .e404-lead[data-lead="moyen"]{display:block}
#cek-facade .e404-grid{grid-template-columns:repeat(2,1fr);gap:20px}
#cek-facade .e404-grid .e404-carte:nth-child(3){grid-column:1/-1;width:calc((100% - 20px)/2);justify-self:center}
#cek-facade .e404-liens{grid-template-columns:repeat(2,1fr);column-gap:36px}
}
@media(min-width:1024px){
#cek-facade .e404-grid{grid-template-columns:repeat(3,1fr);gap:24px}
#cek-facade .e404-grid .e404-carte:nth-child(3){grid-column:auto;width:auto;justify-self:stretch}
}
/* ----------------------------------------------------------------------
A partir de 861 px : l accroche passe sur l image.
L image devient le fond de la premiere section, pleine largeur.
« Erreur 404 » se pose en haut, le titre et l accroche en bas, en blanc.
Les sorties restent sur fond clair : on ne lit pas huit liens sur une
photo. L element ![]()
est conserve, en position absolue, plutot qu un
background-image : il garde son alt, son srcset et son chargement
prioritaire.
---------------------------------------------------------------------- */
@media(min-width:861px){
#cek-facade.cek-404 .e404{position:relative;display:flex;align-items:flex-end;
overflow:hidden;min-height:clamp(400px,52vh,640px);padding:0 0 clamp(30px,4vw,54px)}
#cek-facade.cek-404 .e404-hero{display:block}
#cek-facade.cek-404 .e404-visuel{position:absolute;inset:0;width:100%;
max-width:none;height:100%;margin:0;border-radius:0;z-index:0;flex:none}
#cek-facade.cek-404 .e404-visuel img{width:100%;height:100%;object-fit:cover;
object-position:50% 46%;border-radius:0}
#cek-facade.cek-404 .e404::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to bottom,
rgba(12,14,16,.50) 0%,
rgba(12,14,16,.18) 42%,
rgba(12,14,16,.64) 100%)}
/* .e404-in reste STATIQUE. Positionnee, elle deviendrait le bloc conteneur
de l image absolue, qui se dimensionnerait alors sur le texte au lieu de
la section : image de 143 px de haut au lieu de 400, titre blanc sur
fond blanc. Constate le 17 septembre 2026. */
#cek-facade.cek-404 .e404 .e404-in{width:min(1080px,92%)}
#cek-facade.cek-404 .e404-copy{position:relative;z-index:2;margin:0;width:auto;max-width:none}
#cek-facade.cek-404 .e404-visuel .e404-code{top:clamp(18px,2.6vw,30px);bottom:auto;
left:max(4%,calc((100% - 1080px)/2));border-radius:8px}
#cek-facade.cek-404 .e404 h1{color:#fff;font-size:clamp(36px,4.2vw,56px);
max-width:15ch;margin:0 0 14px}
#cek-facade.cek-404 .e404-lead{color:#fff;opacity:.92;font-size:18px;max-width:52ch;margin:0}
#cek-facade.cek-404 .e404-pistes{padding:clamp(32px,4vw,54px) 0 clamp(40px,5vw,72px)}
}
/* ----------------------------------------------------------------------
Sous 860 px : la bande, puis le texte, puis les sorties.
L en-tete natif est sticky et occupe 56 px sous 860 px (header-natif.css).
La bande fait 44 % de la hauteur visible, bornee de 230 a 400 px : c est
cette borne qui laisse la deuxieme carte a cheval sur le bord, ce qui dit
au visiteur qu il y a une suite.
dvh et non vh : sur mobile, vh ignore la barre d adresse qui se retracte,
et la page deborde exactement de sa hauteur.
---------------------------------------------------------------------- */
@media(max-width:860px){
#cek-facade.cek-404{display:flex;flex-direction:column}
#cek-facade.cek-404 .e404{flex:0 0 auto;padding:0}
#cek-facade.cek-404 .e404 .e404-in{width:100%}
#cek-facade.cek-404 .e404-hero{display:flex;flex-direction:column;gap:0}
#cek-facade.cek-404 .e404-visuel{order:0;position:relative;display:block;width:100%;
height:clamp(230px,44dvh,400px);flex:0 0 auto;overflow:hidden}
#cek-facade.cek-404 .e404-visuel img{width:100%;height:100%;object-fit:cover;
object-position:50% 46%;border-radius:0}
/* « Erreur 404 » passe sur l image : autant de hauteur rendue au texte. */
#cek-facade.cek-404 .e404-visuel .e404-code{left:0;bottom:0;top:auto;
border-top-right-radius:10px}
#cek-facade.cek-404 .e404-copy{order:1;width:92%;margin:16px auto 0}
#cek-facade.cek-404 .e404 h1{font-size:27px;line-height:1.1;margin:0 0 9px;max-width:none}
#cek-facade.cek-404 .e404-lead{font-size:15px;line-height:1.5;margin:0}
#cek-facade.cek-404 .e404-pistes{flex:0 0 auto;padding:18px 0 20px}
#cek-facade.cek-404 .e404-pistes h2{font-size:19px;margin:0 0 11px}
#cek-facade.cek-404 .e404-pistes h3{font-size:16px;margin:26px 0 10px}
#cek-facade.cek-404 .e404-grid{gap:9px}
#cek-facade.cek-404 .e404-carte{padding:13px 15px;border-radius:14px}
#cek-facade.cek-404 .e404-k{width:24px;height:24px;font-size:12.5px;margin-bottom:7px}
#cek-facade.cek-404 .e404-carte strong{font-size:16px;margin-bottom:3px}
#cek-facade.cek-404 .e404-carte span:last-child{font-size:13.5px;line-height:1.4}
#cek-facade.cek-404 .e404-liens a{padding:11px 2px;font-size:15px}
#cek-facade.cek-404 .e404-aide{margin-top:22px;font-size:14px}
}
/* ----------------------------------------------------------------------
L indice de suite, insere par cekonay-404-suite.js DANS le .
Il est centre sur l image : c est la seule grande surface libre de la
page sous 860 px, et la pastille sombre y est lisible sans voile.
Il n existe pas au-dessus de 860 px, ou les trois sorties sont visibles.
---------------------------------------------------------------------- */
#cek-facade.cek-404 .e404-suite{position:absolute;inset:0;z-index:4;
display:flex;align-items:center;justify-content:center;pointer-events:none}
#cek-facade.cek-404 .e404-suite-b{pointer-events:auto;
display:inline-flex;align-items:center;gap:7px;
font:600 14px/1 "Archivo",system-ui,-apple-system,sans-serif;
color:#fff;background:rgba(18,20,23,.86);border:0;cursor:pointer;
padding:12px 17px 12px 19px;border-radius:999px;
box-shadow:0 6px 22px rgba(0,0,0,.30);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#cek-facade.cek-404 .e404-suite-b svg{width:17px;height:17px;fill:none;
stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
animation:cek404-bond 1.7s ease-in-out infinite}
@keyframes cek404-bond{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(3px)}}
#cek-facade.cek-404 .e404-suite[data-parti="1"]{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){
#cek-facade.cek-404 .e404-suite-b svg{animation:none}
}
@media (min-width:861px){
#cek-facade.cek-404 .e404-suite{display:none}
}
/* ======================================================================
Pages de lecture longue (.doc)
Ces pages viennent de la conversion : leur contenu est une suite de
titres et de paragraphes, sans decoupage en sections dessinees. Elles
n avaient AUCUNE regle et s affichaient en texte nu. L enjeu ici est de
donner du rythme a une colonne de texte : mesure de lecture contenue,
respiration entre les idees, images qui debordent du texte, reperes
visuels reguliers. Meme grammaire que les pages dessinees a la main.
====================================================================== */
#cek-facade .doc{padding:8px 0 96px}
#cek-facade .doc .wrap{max-width:1160px}
/* La colonne de lecture. 68 caracteres : au-dela l oeil perd la ligne. */
#cek-facade .doc-corps{max-width:44rem;margin:0 auto;font-size:17.5px;line-height:1.66;color:var(--ink)}
#cek-facade .doc-corps > p{margin:0 0 1.35em;color:#37343A}
#cek-facade .doc-corps > p:last-child{margin-bottom:0}
/* Le premier paragraphe porte la promesse : on le detache. */
#cek-facade .doc-corps > p:first-child{font-size:20px;line-height:1.55;color:var(--ink)}
/* Les titres decoupent la lecture. Filet fin au-dessus pour marquer la
rupture sans alourdir, et beaucoup d air avant, peu apres. */
#cek-facade .doc-corps > h2{font-size:clamp(24px,2.9vw,34px);line-height:1.15;letter-spacing:-.028em;
margin:2.6em 0 .7em;padding-top:1.5em;border-top:1px solid var(--line);text-wrap:balance}
#cek-facade .doc-corps > h2:first-child{margin-top:0;padding-top:0;border-top:0}
#cek-facade .doc-corps > h3{font-size:clamp(19px,2.1vw,23px);line-height:1.25;letter-spacing:-.02em;
margin:2em 0 .55em;color:var(--ink)}
#cek-facade .doc-corps > h4{font-size:17.5px;font-weight:600;margin:1.8em 0 .5em}
/* Le paragraphe qui suit un titre introduit la section : legerement plus
grand, comme un chapeau. */
#cek-facade .doc-corps > h2 + p{font-size:18.5px;color:var(--ink)}
#cek-facade .doc-corps strong{font-weight:600;color:var(--ink)}
#cek-facade .doc-corps em{font-style:italic}
#cek-facade .doc-corps a{color:var(--blue-link);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:rgba(0,98,196,.32);transition:text-decoration-color .18s}
#cek-facade .doc-corps a:hover{text-decoration-color:var(--blue-link)}
/* Listes : puces discretes, alignees sur la colonne. */
#cek-facade .doc-corps ul,#cek-facade .doc-corps ol{margin:0 0 1.35em;padding-left:1.3em}
#cek-facade .doc-corps li{margin:0 0 .6em;padding-left:.2em}
#cek-facade .doc-corps ul{list-style:none;padding-left:0}
#cek-facade .doc-corps ul > li{position:relative;padding-left:1.35em}
#cek-facade .doc-corps ul > li::before{content:"";position:absolute;left:.35em;top:.72em;
width:5px;height:5px;border-radius:50%;background:var(--accent)}
#cek-facade .doc-corps ol > li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
/* Les images debordent de la colonne de texte : c est ce qui donne le
rythme d une page editoriale plutot que d un document. */
#cek-facade .doc-img{margin:2.8em -3rem;display:block}
#cek-facade .doc-img img{width:100%;border-radius:18px;background:var(--mist)}
#cek-facade .doc-img figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted);
text-align:center;padding:0 1rem}
/* Renvois de fin de page. */
#cek-facade .doc-liens{max-width:44rem;margin:64px auto 0;background:var(--mist);border-radius:22px;
padding:32px 34px}
#cek-facade .doc-liens > strong{display:block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--accent);margin-bottom:18px}
#cek-facade .doc-liens ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#cek-facade .doc-liens li{margin:0}
#cek-facade .doc-liens a{display:block;padding:12px 0;font-size:16.5px;color:var(--ink);
border-bottom:1px solid var(--line);transition:color .18s}
#cek-facade .doc-liens li:last-child a{border-bottom:0}
#cek-facade .doc-liens a:hover{color:var(--blue-link)}
/* Tablette : les images cessent de deborder, la place manque. */
@media(max-width:900px){
#cek-facade .doc{padding-bottom:72px}
#cek-facade .doc-img{margin:2.4em -1.2rem}
#cek-facade .doc-liens{padding:28px 26px;border-radius:18px}
}
/* Telephone : tout se resserre, la lecture reste prioritaire. */
@media(max-width:600px){
#cek-facade .hero-doc{padding:56px 0 4px}
#cek-facade .doc{padding-bottom:56px}
#cek-facade .doc-corps{font-size:17px;line-height:1.62}
#cek-facade .doc-corps > p:first-child{font-size:18.5px}
#cek-facade .doc-corps > h2{margin:2em 0 .6em;padding-top:1.2em}
#cek-facade .doc-corps > h2 + p{font-size:17.5px}
#cek-facade .doc-img{margin:2em 0}
#cek-facade .doc-img img{border-radius:14px}
#cek-facade .doc-liens{margin-top:44px;padding:24px 20px}
}
/* Bandes alternees et reperes ------------------------------------------
Une page convertie est une suite de titres et de paragraphes. Sans
alternance de fond, elle se lit comme un document administratif. Le
changement de fond toutes les trois idees redonne le rythme d une page
dessinee, sans rien changer au texte. */
#cek-facade .doc.doc-mist{background:var(--mist)}
#cek-facade .doc{padding:52px 0}
#cek-facade .doc + .doc{padding-top:52px}
#cek-facade .doc.doc-mist + .doc,#cek-facade .doc + .doc.doc-mist{padding-top:64px}
/* Le premier titre d une bande n a pas besoin de son filet : le changement
de fond marque deja la rupture. */
#cek-facade .doc.doc-mist .doc-corps > h2:first-child,
#cek-facade .doc .doc-corps > h2:first-child{margin-top:0;padding-top:0;border-top:0}
#cek-facade .doc-reperes{padding:64px 0;background:var(--night);color:#fff}
#cek-facade .doc-reperes .eyebrow{color:var(--accent-on-dark);margin-bottom:26px}
#cek-facade .rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden}
#cek-facade .rep{background:var(--night);padding:26px 28px}
#cek-facade .rep p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.9);margin:0}
#cek-facade .rep p strong{color:#fff}
@media(max-width:600px){
#cek-facade .doc{padding:40px 0}
#cek-facade .doc.doc-mist + .doc,#cek-facade .doc + .doc.doc-mist{padding-top:48px}
#cek-facade .doc-reperes{padding:48px 0}
#cek-facade .rep{padding:22px 22px}
}
/* Haut des pages de lecture longue ------------------------------------- */
#cek-facade .hero-doc .eyebrow{margin-bottom:14px}
#cek-facade .hero-doc-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px}
#cek-facade .hero-doc-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:18px;
border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
#cek-facade .hero-doc-proof b{font-weight:500;display:inline-flex;align-items:center;gap:7px}
#cek-facade .hero-doc-proof b::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--accent);flex:0 0 auto}
@media(max-width:600px){
#cek-facade .hero-doc-ctas{margin-top:20px}
#cek-facade .hero-doc-proof{gap:8px 18px;margin-top:20px;font-size:13.5px}
}
/* Video pleine largeur ---------------------------------------------------
Attention : la classe .tuto est reservee, l injecteur du theme y insere
son propre bloc de demonstration. On utilise .film.
Quatre videos existent en variante allegee pour telephone : on charge la
bonne source selon la largeur, une video de 25 Mo n a rien a faire sur un
forfait mobile. */
#cek-facade .scene{padding:0;margin:0;position:relative;background:var(--night)}
#cek-facade #compatible-scene{max-width:1080px;margin:64px auto;padding:0 24px;background:transparent}
#cek-facade #compatible-scene picture{display:block;overflow:hidden;border-radius:22px;background:var(--mist)}
#cek-facade #compatible-scene img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#cek-facade #compatible-scene .scene-legende{position:static;padding:18px 4px 0;background:none;color:var(--ink)}
#cek-facade #compatible-scene .scene-legende b,#cek-facade #compatible-scene .scene-legende span{display:block}
#cek-facade #compatible-scene .scene-legende span{margin-top:4px;color:var(--muted)}
@media(max-width:720px){#cek-facade #compatible-scene{margin:44px auto;padding:0 20px}#cek-facade #compatible-scene picture{border-radius:16px}}
#cek-facade .scene video{width:100%;display:block;max-height:82vh;object-fit:cover}
#cek-facade .scene-legende{position:absolute;left:0;right:0;bottom:0;padding:28px 24px;
background:linear-gradient(to top,rgba(14,12,10,.86),rgba(14,12,10,0));color:#fff}
#cek-facade .scene-legende b{display:block;font-size:clamp(19px,2.4vw,26px);font-weight:600;
letter-spacing:-.02em;margin-bottom:6px}
#cek-facade .scene-legende span{font-size:15px;opacity:.86}
@media(max-width:600px){
#cek-facade .scene video{max-height:70vh}
#cek-facade .scene-legende{padding:20px 18px}
}
/* Accueil : introduction et video alignées, puis respiration avant les cartes. */
body.home #cek-facade .fin-intro .s-head{margin-bottom:0}
body.home #cek-facade .fin-intro .scene{width:100%;overflow:hidden;border-radius:20px}
body.home #cek-facade .fin-intro .scene video{aspect-ratio:16/9;object-fit:cover}
body.home #cek-facade .fin-intro + .fin-grid{width:100%;margin-top:42px}
body.home #cek-facade #gammes .fin-intro .scene-legende{position:static;padding:14px 16px 15px;
background:var(--mist);border-top:1px solid var(--line);color:var(--ink)}
body.home #cek-facade #gammes .fin-intro .scene-legende b{font-size:15px;line-height:1.3;margin-bottom:2px}
body.home #cek-facade #gammes .fin-intro .scene-legende span{display:block;font-size:13px;
line-height:1.4;opacity:1;color:var(--muted)}
@media (min-width:700px){
body.home #cek-facade .fin-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:center}
body.home #cek-facade .fin-intro + .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
body.home #cek-facade .fin-intro{display:flex;flex-direction:column;gap:26px}
body.home #cek-facade .fin-intro + .fin-grid{grid-template-columns:1fr;margin-top:32px}
}
body.home #cek-facade .fin-separator{grid-column:1/-1;display:flex;align-items:center;gap:14px;
margin:8px 0 0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
body.home #cek-facade .fin-separator::before,body.home #cek-facade .fin-separator::after{
content:"";height:1px;background:var(--line);flex:1}
@media (max-width:699px){body.home #cek-facade .fin-separator{margin-top:2px}}
/* ======================================================================
BLOCS SIGNATURE
Mesure faite le 24 aout : la grille de cartes apparait sur 98 % des
pages, les deux colonnes sur 95 %, l accordeon sur 95 %. Seize
combinaisons pour quarante pages. Visuellement, c est le meme gabarit
partout, et le client a raison de le refuser.
Reponse retenue : un socle commun, typographie, couleur, hero et appel
final, plus UN bloc signature par famille de pages, qu on ne voit nulle
part ailleurs. Ni quarante designs uniques, qui detruiraient la marque,
ni un gabarit unique, qui ennuie.
====================================================================== */
/* --- 1. L echelle des cotes. Pour les pages de dimensions. -------------
Montre la plage de fabrication a l echelle plutot que de l enoncer :
une barre proportionnelle vaut mieux qu un tableau de chiffres. */
#cek-facade .echelle{padding:76px 0;background:var(--mist)}
#cek-facade .ech-ligne{display:grid;grid-template-columns:minmax(120px,1fr) 3fr auto;
gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
#cek-facade .ech-ligne:last-child{border-bottom:0}
#cek-facade .ech-nom{font-size:17px;font-weight:600;letter-spacing:-.01em}
#cek-facade .ech-nom span{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:3px}
#cek-facade .ech-barre{position:relative;height:12px;border-radius:99px;background:var(--line);overflow:hidden}
#cek-facade .ech-barre i{position:absolute;top:0;bottom:0;border-radius:99px;
background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--blue)))}
#cek-facade .ech-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
@media(max-width:700px){
#cek-facade .echelle{padding:52px 0}
#cek-facade .ech-ligne{grid-template-columns:1fr;gap:10px;padding:18px 0}
#cek-facade .ech-val{font-size:13.5px}
}
/* --- 2. Le comparatif. Pour les pages qui opposent des solutions. ------
Un vrai tableau, lisible en colonnes sur grand ecran et en cartes
empilees sur telephone, ou chaque ligne redevient une paire. */
#cek-facade .compare{padding:76px 0}
#cek-facade .cmp{width:100%;border-collapse:collapse;font-size:16px}
#cek-facade .cmp th,#cek-facade .cmp td{padding:16px 18px;text-align:left;
border-bottom:1px solid var(--line);vertical-align:top}
#cek-facade .cmp thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);font-weight:600;border-bottom:2px solid var(--ink)}
#cek-facade .cmp .nous{background:var(--accent-soft,#e6f1f1)}
#cek-facade .cmp .nous strong{color:var(--accent)}
#cek-facade .cmp-note{margin-top:18px;font-size:14.5px;color:var(--muted)}
#cek-facade .compare-boite{overflow-x:auto}
@media(max-width:760px){
#cek-facade .compare{padding:52px 0}
#cek-facade .cmp thead{display:none}
#cek-facade .cmp tr{display:block;border:1px solid var(--line);border-radius:14px;
padding:6px 14px;margin-bottom:14px}
#cek-facade .cmp td{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
#cek-facade .cmp td:last-child{border-bottom:0}
#cek-facade .cmp td::before{content:attr(data-col);font-weight:600;color:var(--muted);flex:0 0 42%}
}
/* --- 3. La galerie. Pour les pages de couleurs et de decors. -----------
L image occupe, le texte s efface. Format mosaique irregulier pour
eviter la grille de vignettes toutes identiques. */
#cek-facade .galerie{padding:0}
#cek-facade .gal-head{max-width:760px;margin:0 auto;padding:76px 24px 28px;text-align:center}
#cek-facade .gal-head h2{margin:0 0 12px}
#cek-facade .gal-head p{margin:0;color:var(--muted)}
@media(max-width:720px){#cek-facade .gal-head{padding:52px 20px 20px}}
/* Six colonnes, et des portees qui pavent SANS TROU quel que soit le nombre
d images : la premiere occupe toute la largeur, les suivantes vont par
deux. Quand la derniere se retrouve seule, elle prend la ligne entiere.
Une premiere version laissait des cellules vides des six images, et la
page paraissait cassee. */
#cek-facade .gal-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
#cek-facade .gal-item{position:relative;margin:0;overflow:hidden;grid-column:span 3;aspect-ratio:3/2}
#cek-facade .gal-item:first-child{grid-column:span 6;aspect-ratio:21/9}
#cek-facade .gal-item:last-child:nth-child(even){grid-column:span 6;aspect-ratio:21/9}
#cek-facade .gal-item img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s ease}
#cek-facade .gal-item:hover img{transform:scale(1.03)}
#cek-facade .gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 16px;
background:linear-gradient(to top,rgba(14,12,10,.82),rgba(14,12,10,0));color:#fff;font-size:15px}
#cek-facade .gal-item figcaption b{display:block;font-size:17px;margin-bottom:2px}
@media(max-width:820px){
#cek-facade .gal-grille{grid-template-columns:repeat(2,1fr)}
#cek-facade .gal-item{grid-column:span 1;aspect-ratio:1}
#cek-facade .gal-item:first-child,
#cek-facade .gal-item:last-child:nth-child(even){grid-column:span 2;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){#cek-facade .gal-item:hover img{transform:none}}
/* --- 4. La liste de controle. Pour les pages de diagnostic. -----------
Le lecteur coche ce qu il verifie chez lui. L etat coche est purement
visuel, rien n est envoye ni conserve. */
#cek-facade .controle{padding:76px 0;background:var(--night);color:#fff}
#cek-facade .controle .s-head h2,#cek-facade .controle .s-head p{color:#fff}
#cek-facade .controle .s-head p{opacity:.76}
#cek-facade .ctl-liste{display:grid;gap:2px;border-radius:18px;overflow:hidden;
border:1px solid rgba(255,255,255,.16)}
#cek-facade .ctl{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;
background:rgba(255,255,255,.04);cursor:pointer;transition:background .18s}
#cek-facade .ctl:hover{background:rgba(255,255,255,.09)}
#cek-facade .ctl input{appearance:none;flex:0 0 auto;width:24px;height:24px;margin-top:2px;
border:2px solid rgba(255,255,255,.42);border-radius:7px;cursor:pointer;position:relative;
transition:border-color .18s,background .18s}
#cek-facade .ctl input:checked{background:var(--accent-on-dark,#69c96e);border-color:var(--accent-on-dark,#69c96e)}
#cek-facade .ctl input:checked::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
border:solid var(--night);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#cek-facade .ctl input:focus-visible{outline:2px solid var(--accent-on-dark,#69c96e);outline-offset:3px}
#cek-facade .ctl-txt b{display:block;font-size:17px;margin-bottom:4px}
#cek-facade .ctl-txt span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.78)}
#cek-facade .ctl-bilan{margin-top:26px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.86)}
#cek-facade .ctl-bilan b{color:#fff}
@media(max-width:600px){
#cek-facade .controle{padding:52px 0}
#cek-facade .ctl{padding:18px 18px;gap:13px}
}
/* --- 5. La frise. Pour les pages chronologiques. ----------------------
Le temps devient une ligne, avec des reperes horaires reels plutot
qu une suite d etapes numerotees interchangeables. */
#cek-facade .frise{padding:76px 0}
#cek-facade .fr-ligne{position:relative;padding-left:0}
#cek-facade .fr-etape{position:relative;display:grid;grid-template-columns:112px 1fr;gap:26px;
padding:0 0 40px}
#cek-facade .fr-etape::before{content:"";position:absolute;left:calc(112px + 13px);top:12px;bottom:-12px;
width:2px;background:var(--line)}
#cek-facade .fr-etape:last-child::before{display:none}
#cek-facade .fr-h{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
font-variant-numeric:tabular-nums;color:var(--accent);text-align:right;padding-top:1px;font-weight:600}
#cek-facade .fr-corps{position:relative;padding-left:26px}
#cek-facade .fr-corps::before{content:"";position:absolute;left:-13px;top:6px;width:12px;height:12px;
border-radius:50%;background:var(--paper);border:2.5px solid var(--accent)}
#cek-facade .fr-corps h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
#cek-facade .fr-corps p{font-size:16px;line-height:1.6;color:#37343A;margin:0}
#cek-facade .fr-duree{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--muted);
border:1px solid var(--line);border-radius:99px;padding:3px 12px}
@media(max-width:640px){
#cek-facade .frise{padding:52px 0}
#cek-facade .fr-etape{grid-template-columns:1fr;gap:6px;padding-bottom:30px}
#cek-facade .fr-etape::before{left:5px;top:34px}
#cek-facade .fr-h{text-align:left}
#cek-facade .fr-corps{padding-left:26px}
#cek-facade .fr-corps::before{left:0}
}
/* ======================================================================
DEUXIEME SERIE DE BLOCS SIGNATURE
Mesure du 24 aout : seules 7 pages sur 40 portaient un traitement
vraiment distinctif, 16 n avaient que le vocabulaire commun. Six blocs
de plus, pour qu aucune page ne partage sa combinaison avec sa voisine.
====================================================================== */
/* --- 6. Avant et apres. Pour les pages de renovation. ------------------
Deux etats de la meme cuisine, separes par une poignee que le lecteur
deplace. Sans JavaScript la seconde image reste visible a moitie : le
bloc reste comprehensible. */
#cek-facade .avap{padding:76px 0}
#cek-facade .avap-cadre{position:relative;overflow:hidden;border-radius:20px;
aspect-ratio:16/9;background:var(--mist)}
#cek-facade .avap-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cek-facade .avap-apres{clip-path:inset(0 0 0 var(--pos,50%))}
#cek-facade .avap-poignee{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
#cek-facade .avap-poignee::after{content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;
box-shadow:0 2px 12px rgba(0,0,0,.28)}
#cek-facade .avap-cadre input[type=range]{position:absolute;inset:0;width:100%;height:100%;
margin:0;opacity:0;cursor:ew-resize;appearance:none;background:transparent}
#cek-facade .avap-etiq{position:absolute;top:16px;font-size:12.5px;letter-spacing:.08em;
text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:99px;
background:rgba(14,12,10,.72);color:#fff}
#cek-facade .avap-etiq.g{left:16px}
#cek-facade .avap-etiq.d{right:16px}
#cek-facade .avap-note{margin-top:16px;font-size:15px;color:var(--muted);text-align:center}
@media(max-width:600px){#cek-facade .avap{padding:52px 0}#cek-facade .avap-cadre{aspect-ratio:4/3}}
/* --- 7. La coupe annotee. Pour les pages de finition. ------------------
Un visuel et des reperes numerotes qui expliquent ce que l oeil ne voit
pas : le coeur du panneau, la laque, le chant. */
#cek-facade .coupe{padding:76px 0;background:var(--mist)}
#cek-facade .coupe-duo{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
#cek-facade .coupe-img{position:relative;margin:0;border-radius:18px;overflow:hidden}
#cek-facade .coupe-img img{width:100%;display:block}
#cek-facade .coupe-liste{list-style:none;margin:0;padding:0;display:grid;gap:20px}
#cek-facade .coupe-liste li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
#cek-facade .coupe-num{width:34px;height:34px;border-radius:50%;display:inline-flex;
align-items:center;justify-content:center;font-size:15px;font-weight:700;
background:var(--accent);color:#fff}
#cek-facade .coupe-liste b{display:block;font-size:17px;margin-bottom:3px}
#cek-facade .coupe-liste span{font-size:15.5px;line-height:1.55;color:#37343A}
/* Le numero doit rester blanc sur sa pastille. La regle ci-dessus, plus
specifique d un element, l emportait et affichait un chiffre gris fonce
sur fond accent. */
#cek-facade .coupe-liste .coupe-num{color:#fff;font-size:15px}
@media(max-width:820px){
#cek-facade .coupe{padding:52px 0}
#cek-facade .coupe-duo{grid-template-columns:1fr;gap:28px}
}
/* --- 8. Le selecteur de marque. Pour les pages de compatibilite. -------
Le lecteur clique sa marque et lit la reponse qui la concerne. Tout en
CSS : chaque bouton est un radio, chaque reponse une cible. */
#cek-facade .selec{padding:76px 0}
#cek-facade .selec-onglets{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
#cek-facade .selec input[type=radio]{position:absolute;opacity:0;pointer-events:none}
#cek-facade .selec-onglets label{cursor:pointer;font-size:15.5px;padding:10px 20px;border-radius:99px;
border:1px solid var(--line);background:var(--paper);transition:all .18s}
#cek-facade .selec-onglets label:hover{border-color:var(--accent)}
#cek-facade .selec-panneau{display:none;background:var(--mist);border-radius:20px;padding:34px 36px}
#cek-facade .selec-panneau h3{font-size:22px;margin:0 0 12px;letter-spacing:-.015em}
#cek-facade .selec-panneau p{font-size:16.5px;line-height:1.6;margin:0 0 12px;color:#37343A}
#cek-facade .selec-panneau p:last-child{margin-bottom:0}
#cek-facade .selec input[type=radio]:checked + label{background:var(--accent);color:#fff;
border-color:var(--accent)}
#cek-facade .selec input[type=radio]:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}
#cek-facade .s1:checked ~ .selec-corps .p1,#cek-facade .s2:checked ~ .selec-corps .p2,
#cek-facade .s3:checked ~ .selec-corps .p3,#cek-facade .s4:checked ~ .selec-corps .p4,
#cek-facade .s5:checked ~ .selec-corps .p5,#cek-facade .s6:checked ~ .selec-corps .p6{display:block}
@media(max-width:600px){
#cek-facade .selec{padding:52px 0}
#cek-facade .selec-panneau{padding:26px 22px}
#cek-facade .selec-onglets label{font-size:14.5px;padding:8px 15px}
}
/* --- 9. Le compteur. Pour les pages de budget et de mesure. ------------
Le lecteur compte ses elements et voit son total se former. Sans
JavaScript, les champs restent lisibles et le total vaut zero. */
#cek-facade .compteur{padding:76px 0;background:var(--night);color:#fff}
#cek-facade .compteur .s-head h2,#cek-facade .compteur .s-head p{color:#fff}
#cek-facade .compteur .s-head p{opacity:.76}
#cek-facade .cpt-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
#cek-facade .cpt{background:var(--night);padding:24px 22px}
#cek-facade .cpt label{display:block;font-size:15px;margin-bottom:12px;color:rgba(255,255,255,.82)}
#cek-facade .cpt-rang{display:flex;align-items:center;gap:12px}
#cek-facade .cpt-rang button{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.28);
background:transparent;color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:background .16s}
#cek-facade .cpt-rang button:hover{background:rgba(255,255,255,.12)}
#cek-facade .cpt-rang input{width:64px;text-align:center;font-size:20px;font-weight:600;
font-variant-numeric:tabular-nums;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.28);
color:#fff;padding:4px 0}
#cek-facade .cpt-total{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
#cek-facade .cpt-total b{font-size:clamp(30px,5vw,44px);font-variant-numeric:tabular-nums;
color:var(--accent-on-dark,#69c96e)}
#cek-facade .cpt-total span{font-size:16px;color:rgba(255,255,255,.8)}
@media(max-width:600px){#cek-facade .compteur{padding:52px 0}#cek-facade .cpt{padding:20px 18px}}
/* --- 10. La chronologie de commande. -----------------------------------
Differente de la frise, qui decoupe une journee. Celle-ci suit une
commande sur plusieurs semaines, en colonnes horizontales. */
#cek-facade .chrono{padding:76px 0}
#cek-facade .chr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
gap:0;overflow-x:auto;padding-bottom:8px}
#cek-facade .chr{position:relative;padding:0 22px 0 0}
#cek-facade .chr::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--line)}
#cek-facade .chr:last-child::before{right:calc(100% - 16px)}
#cek-facade .chr-pt{position:relative;width:32px;height:32px;border-radius:50%;background:var(--paper);
border:2.5px solid var(--accent);display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:700;color:var(--accent);margin-bottom:18px}
#cek-facade .chr h3{font-size:17.5px;margin:0 0 6px;letter-spacing:-.01em}
#cek-facade .chr p{font-size:15px;line-height:1.55;color:#37343A;margin:0;padding-right:14px}
#cek-facade .chr em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:8px}
@media(max-width:760px){
#cek-facade .chrono{padding:52px 0}
#cek-facade .chr-rail{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
#cek-facade .chr{padding:0 0 30px 0;display:grid;grid-template-columns:32px 1fr;gap:18px}
#cek-facade .chr::before{left:15px;right:auto;top:32px;bottom:-2px;width:2px;height:auto}
#cek-facade .chr:last-child::before{display:none}
#cek-facade .chr-pt{margin-bottom:0}
#cek-facade .chr-txt{grid-column:2}
}
/* --- 11. Le nuancier. Pour les pages de couleur. -----------------------
Des pastilles carrees, groupees par famille. Chaque pastille porte la
photo reelle de la finition, visible en permanence : on compare des
matieres, pas des aplats. Pas de survol, le tactile doit voir pareil. */
#cek-facade .nuancier{padding:76px 0;background:var(--mist)}
#cek-facade .nu-famille{margin-bottom:38px}
#cek-facade .nu-famille:last-child{margin-bottom:0}
#cek-facade .nu-titre{font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
color:var(--accent);margin:0 0 16px}
#cek-facade .nu-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
#cek-facade .nu{margin:0;border-radius:14px;overflow:hidden;background:var(--paper);
border:1px solid var(--line)}
#cek-facade .nu-pastille{aspect-ratio:1;display:block;position:relative;overflow:hidden}
#cek-facade .nu-pastille img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cek-facade .nu figcaption{padding:11px 13px;font-size:14.5px;line-height:1.35}
#cek-facade .nu figcaption b{display:block;font-weight:600}
#cek-facade .nu figcaption span{font-size:13px;color:var(--muted)}
@media(max-width:600px){
#cek-facade .nuancier{padding:52px 0}
#cek-facade .nu-grille{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
}
/* Page façades blanches : médias cadrés et grilles lisibles sur tablette. */
body.page-id-286223 #cek-facade .hero{min-height:640px;background:#1b1a19}
body.page-id-286223 #cek-facade .hero .hero-bg{inset:0 0 0 auto;width:min(58vw,760px);object-fit:contain;object-position:right center}
body.page-id-286223 #cek-facade .hero::after{background:linear-gradient(90deg,rgba(18,17,16,.98) 0%,rgba(18,17,16,.93) 34%,rgba(18,17,16,.66) 53%,rgba(18,17,16,.12) 78%),linear-gradient(to top,rgba(18,17,16,.72),transparent 48%)}
body.page-id-286223 #cek-facade .hero .hero-in{max-width:1160px}
body.page-id-286223 #cek-facade .hero h1{max-width:15ch}
body.page-id-286223 #cek-facade .hero .hero-in>p{max-width:45ch}
body.page-id-286223 #cek-facade .film{padding:64px 0 0}
body.page-id-286223 #cek-facade .film .film-grid{width:min(760px,100%);margin:0 auto}
body.page-id-286223 #cek-facade .film .film-v{background:var(--mist);box-shadow:0 14px 38px rgba(20,20,24,.08)}
body.page-id-286223 #cek-facade .film video{object-fit:contain}
@media(min-width:601px) and (max-width:900px){
body.page-id-286223 #cek-facade .hero{min-height:620px}
body.page-id-286223 #cek-facade .hero .hero-bg{inset:0 0 0 auto;width:70vw;object-position:right center}
body.page-id-286223 #cek-facade .hero::after{background:linear-gradient(to top,rgba(18,17,16,.94) 0%,rgba(18,17,16,.72) 48%,rgba(18,17,16,.16) 100%)}
body.page-id-286223 #cek-facade .nu-famille--brillants .nu-grille{grid-template-columns:repeat(4,minmax(0,1fr))}
body.page-id-286223 #cek-facade .nu-famille--textures .nu-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
body.page-id-286223 #cek-facade .nu-famille--brillants .nu-pastille img,
body.page-id-286223 #cek-facade .nu-famille--textures .nu-pastille img{object-fit:contain;background:#fff}
}
@media(max-width:600px){
body.page-id-286223 #cek-facade .hero{min-height:78vh}
body.page-id-286223 #cek-facade .hero .hero-bg{inset:0;width:100%;object-position:center 52%}
body.page-id-286223 #cek-facade .hero::after{background:linear-gradient(to top,rgba(18,17,16,.97) 0%,rgba(18,17,16,.82) 52%,rgba(18,17,16,.18) 100%)}
body.page-id-286223 #cek-facade .film{padding-top:48px}
body.page-id-286223 #cek-facade .film .wrap{padding:0 16px}
body.page-id-286223 #cek-facade .film .film-v{border-radius:16px}
}
/* =====================================================================
Blocs repris de cuisine.cekonay.com, le 26 aout 2026.
Les deux sites partagent deja leurs jetons de couleur (--line, --mist,
--ink, --muted), donc le portage se reduit a cadrer les selecteurs sous
#cek-facade pour qu aucune regle ne fuie vers l en-tete ou le pied.
Cinq familles, choisies pour ce que cekonay ne savait pas faire :
.see montrer avant d acheter, media et etapes cote a cote
.matter la matiere, en pastilles que l on parcourt
.euro des barres de proportion, pour dire ou va la depense
.guides une grille de reponses, utile aussi au maillage interne
.reassure des chiffres de reassurance en grille
Le bloc .cost de cuisine a ete volontairement ECARTE : c est un
estimateur de prix, et le client interdit de publier des tarifs.
Ces classes sont declarees dans outils/controle-redaction.py, sans quoi
la porte de qualite refuserait toute page qui les emploie.
===================================================================== */
#cek-facade .pill{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:980px;padding:0 18px;font-size:14.5px;text-decoration:none;color:var(--ink)}
#cek-facade .pill:hover{background:var(--mist)}
#cek-facade .see{padding:0 0 96px}
#cek-facade .see-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
#cek-facade .see h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:0 0 14px;max-width:16ch;text-wrap:balance}
#cek-facade .see>.wrap>.see-grid>div>p.intro{font-size:16.5px;color:var(--muted);margin:0 0 30px;max-width:44ch}
#cek-facade .see-steps{display:flex;flex-direction:column;gap:22px;margin-bottom:30px}
#cek-facade .see-step{display:grid;grid-template-columns:30px 1fr;gap:14px}
#cek-facade .see-step .n{width:26px;height:26px;border-radius:50%;background:#f1fffe;color:#01808f;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}
#cek-facade .see-step h3{font-size:17.5px;margin:0 0 4px}
#cek-facade .see-step p{font-size:15px;color:var(--muted);margin:0;max-width:44ch}
#cek-facade .see-media img{width:100%;height:520px;object-fit:cover;border-radius:22px}
#cek-facade .matter{background:var(--night);color:#F5F3F0;padding:96px 0}
#cek-facade .matter .eyebrow{color:var(--accent-on-dark)}
#cek-facade .matter h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:12px 0 16px;color:#fff;max-width:20ch;text-wrap:balance}
#cek-facade .matter .lead{font-size:17px;color:#C6C2BD;max-width:64ch;margin:0 0 38px}
#cek-facade .matter .lead b{color:#fff;font-weight:600}
#cek-facade .mat-pills .pill{border-color:rgba(255,255,255,.28);color:#E9E6E2}
#cek-facade .mat-pills .pill:hover{background:rgba(255,255,255,.08)}
#cek-facade .touch-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
#cek-facade .touch-strip figure{margin:0}
#cek-facade .touch-strip img{width:100%;height:210px;object-fit:cover;border-radius:18px}
#cek-facade .touch-strip figcaption{margin-top:12px;font-size:14.5px;color:#C6C2BD}
#cek-facade .euro{padding:92px 0;background:var(--night);color:#F5F3F0}
#cek-facade .euro .s-head h2{color:#fff}
#cek-facade .euro .s-head p{color:#C6C2BD}
#cek-facade .euro .eyebrow{color:var(--accent-on-dark)}
#cek-facade .bars{display:grid;gap:26px;margin-top:36px;max-width:920px;min-width:0}
#cek-facade .bar-row{min-width:0}
#cek-facade .bar-row .bl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:12px;flex-wrap:wrap}
#cek-facade .bar-row .who{font-size:18.5px;font-weight:600;color:#F5F3F0}
#cek-facade .bar-row .pct{font-size:25px;font-weight:600;letter-spacing:-.02em;color:#fff}
#cek-facade .bar{height:54px;border-radius:14px;overflow:hidden;display:flex}
#cek-facade .euro-note{font-size:14px;color:#C6C2BD;margin-top:18px}
#cek-facade .bar-legend{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:#D8D4CF}
#cek-facade .bar-legend span{display:inline-flex;align-items:center;gap:8px}
#cek-facade .bar-legend i{width:12px;height:12px;border-radius:3px;flex:none}
#cek-facade .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
#cek-facade .stat{border-top:1px solid #DCD6CE;padding-top:20px}
#cek-facade .stat .big{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1}
#cek-facade .stat p{font-size:14.5px;color:var(--muted);margin:10px 0 0}
#cek-facade .again{min-height:44px;background:none;border:none;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--blue-link);cursor:pointer;text-decoration:none}
#cek-facade .bars.reveal .bar-row:nth-of-type(1) .seg{animation:segIn .6s cubic-bezier(.22,.9,.28,1) both}
#cek-facade .bars.reveal .bar-row:nth-of-type(2) .seg.mat-s{animation:pousse .9s cubic-bezier(.22,.9,.28,1) .55s both}
#cek-facade .bars.reveal .bar-row:nth-of-type(2) .seg.logi{animation:recule .9s cubic-bezier(.22,.9,.28,1) .55s both}
#cek-facade .reassure{padding:64px 22px;background:var(--mist)}
#cek-facade .reassure .stats-grid{max-width:1024px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;text-align:center}
#cek-facade .reassure .stat{flex:1 1 200px;max-width:280px;border:0;padding:0}
#cek-facade .reassure .stat .big{font-size:clamp(30px,4vw,40px);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
#cek-facade .reassure .stat p{font-size:15px;line-height:1.5;color:var(--muted);margin:6px 0 0}
#cek-facade .estim{position:sticky;top:72px;border:1px solid var(--line);border-radius:22px;padding:26px 26px 24px}
#cek-facade .estim .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#cek-facade .estim .out{font-size:34px;font-weight:600;letter-spacing:-.03em;margin:4px 0 2px}
#cek-facade .estim .outsub{font-size:14px;color:var(--muted);margin-bottom:18px}
#cek-facade .estim .disclaimer{font-size:12.5px;color:var(--muted);margin:16px 0 0;line-height:1.5}
#cek-facade .guides{padding:92px 0;background:var(--mist)}
#cek-facade .g-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
#cek-facade .g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){
#cek-facade .envie-grid,#cek-facade .g-grid,#cek-facade .fc-grid.stars,#cek-facade .touch-strip{grid-template-columns:1fr}
#cek-facade .touch-strip img{height:200px}
#cek-facade .stats-grid{grid-template-columns:1fr 1fr}
#cek-facade .see-grid,#cek-facade .cost-grid{grid-template-columns:1fr;gap:30px}
#cek-facade .estim{position:static}
#cek-facade .see-media img{height:320px}
#cek-facade .envie,#cek-facade .see,#cek-facade .euro,#cek-facade .cost,#cek-facade .guides{padding-top:64px;padding-bottom:64px}
#cek-facade .see{padding-top:0}
#cek-facade .bar{height:44px}
}
body.page-id-285099 #cek-facade .envie-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:24px}
body.page-id-285099 #cek-facade .env-b{max-width:none;background:var(--mist);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:30px;align-items:flex-start}
body.page-id-285099 #cek-facade .env-b h3{color:var(--ink)}
body.page-id-285099 #cek-facade .env-b p{color:var(--muted)}
body.page-id-285099 #cek-facade .env-b .doc-img{margin:8px 0 14px;width:100%;max-width:none}
body.page-id-285099 #cek-facade .env-b .doc-img img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;border-radius:14px;background:var(--paper)}
body.page-id-285099 #cek-facade .env-b .doc-img figcaption{color:var(--muted)}
body.page-id-285099 #cek-facade .env-b .btn.ghost{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:900px){body.page-id-285099 #cek-facade .envie-grid{grid-template-columns:1fr;gap:18px}body.page-id-285099 #cek-facade .env-b{padding:22px 20px}body.page-id-285099 #cek-facade .env-b .doc-img{margin:4px 0 12px}body.page-id-285099 #cek-facade .env-b .doc-img img{max-height:none}}
/* Page percage et pose : deux parcours visuellement comparables. */
body.page-id-285099 #cek-facade .env-b{gap:12px}
body.page-id-285099 #cek-facade .env-b>h3{order:0}
body.page-id-285099 #cek-facade .env-b>.doc-img,
body.page-id-285099 #cek-facade .env-b>.envie-visuel{order:1;width:100%;margin:6px 0 10px}
body.page-id-285099 #cek-facade .env-b>p{order:2}
body.page-id-285099 #cek-facade .env-b>.needhelp-start{order:3;display:flex;align-items:center;gap:14px;width:100%;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
body.page-id-285099 #cek-facade .needhelp-logo{display:block;width:112px;height:auto}
body.page-id-285099 #cek-facade .needhelp-cta{color:var(--blue);font-weight:600;text-decoration:none}
body.page-id-285099 #cek-facade .needhelp-cta:hover{text-decoration:underline;text-underline-offset:3px}
body.page-id-285099 #cek-facade .env-b>.doc-img img,
body.page-id-285099 #cek-facade .env-b>.envie-visuel img{display:block;width:100%;height:240px;border-radius:14px}
body.page-id-285099 #cek-facade .env-b>.doc-img img{max-height:240px;object-fit:contain;background:var(--paper)}
body.page-id-285099 #cek-facade .env-b>.envie-visuel img{object-fit:cover}
body.page-id-285099 #cek-facade .env-b:first-child>p:last-child{margin-top:auto}
@media(max-width:900px){body.page-id-285099 #cek-facade .env-b>.doc-img img{height:auto;max-height:260px}body.page-id-285099 #cek-facade .env-b>.envie-visuel img{height:240px}body.page-id-285099 #cek-facade .env-b>.needhelp-start{margin-top:10px}}
body.page-id-287990 #cek-facade .porteco-scene{max-width:1008px;margin:72px auto;padding:0 24px;background:transparent}
body.page-id-287990 #cek-facade .porteco-scene picture{display:block}
body.page-id-287990 #cek-facade .porteco-scene img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:22px}
body.page-id-287990 #cek-facade .porteco-scene .scene-legende{position:static;padding:14px 4px 0;background:none;color:var(--ink)}
body.page-id-287990 #cek-facade .porteco-scene .scene-legende b{color:var(--ink);font-size:18px}
body.page-id-287990 #cek-facade .porteco-scene .scene-legende span{color:var(--muted);font-size:14px}
@media(max-width:720px){body.page-id-287990 #cek-facade .porteco-scene{margin:48px auto;padding:0 20px}body.page-id-287990 #cek-facade .porteco-scene img{border-radius:16px}body.page-id-287990 #cek-facade .porteco-scene .scene-legende{padding:12px 2px 0}}
/* Qui sommes-nous : narration courte, preuves et identite, sans logique catalogue. */
body.page-id-285614 #cek-facade.about-page{background:#fff;color:var(--ink)}
body.page-id-285614 #cek-facade .about-shell{width:min(1160px,calc(100% - 48px));margin:0 auto}
body.page-id-285614 #cek-facade .about-hero{padding:76px 0 88px;background:#f6f3ee}
body.page-id-285614 #cek-facade .about-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);align-items:center;gap:clamp(42px,6vw,84px)}
body.page-id-285614 #cek-facade .about-hero-copy{display:flex;flex-direction:column;align-items:flex-start}
body.page-id-285614 #cek-facade .about-hero h1{font-size:clamp(42px,5vw,68px);line-height:.99;letter-spacing:-.052em;font-weight:600;max-width:12ch;margin:18px 0 24px;text-wrap:balance}
body.page-id-285614 #cek-facade .about-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted);max-width:49ch}
body.page-id-285614 #cek-facade .about-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px;margin-top:30px}
body.page-id-285614 #cek-facade .about-text-link{color:var(--blue);font-weight:600;text-decoration:none;line-height:1.35}
body.page-id-285614 #cek-facade .about-text-link:hover{text-decoration:underline;text-underline-offset:4px}
body.page-id-285614 #cek-facade .about-hero-media{display:block;overflow:hidden;border-radius:30px;box-shadow:0 24px 70px rgba(35,29,24,.13)}
body.page-id-285614 #cek-facade .about-hero-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
body.page-id-285614 #cek-facade .about-hero-rotator{position:relative;isolation:isolate;aspect-ratio:4/3}
body.page-id-285614 #cek-facade .about-hero-rotator__item{position:absolute;inset:0;display:block;opacity:0;transition:opacity .7s ease;pointer-events:none}
body.page-id-285614 #cek-facade .about-hero-rotator__item:first-child{position:relative}
body.page-id-285614 #cek-facade .about-hero-rotator__item.is-active{opacity:1}
body.page-id-285614 #cek-facade .about-hero-rotator__item img{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
body.page-id-285614 #cek-facade .about-story{padding:112px 0}
body.page-id-285614 #cek-facade .about-story-grid{display:block}
body.page-id-285614 #cek-facade .about-story-intro{max-width:720px;margin-bottom:34px}
body.page-id-285614 #cek-facade .about-story h2,body.page-id-285614 #cek-facade .about-intro h2,body.page-id-285614 #cek-facade .about-choice h2,body.page-id-285614 #cek-facade .about-identity h2,body.page-id-285614 #cek-facade .about-final h2{font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
body.page-id-285614 #cek-facade .about-story h2{margin-top:16px;max-width:15ch}
body.page-id-285614 #cek-facade .about-prose::after{content:"";display:block;clear:both}
body.page-id-285614 #cek-facade .about-story-media{float:right;width:min(54%,620px);margin:0 0 24px 48px;overflow:hidden;border-radius:22px;background:#171717;aspect-ratio:16/9}
body.page-id-285614 #cek-facade .about-story-media video{display:block;width:100%;height:100%;object-fit:cover}
body.page-id-285614 #cek-facade .about-prose{padding-top:32px;border-top:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-prose p{font-size:18px;line-height:1.68;color:#4b4946;margin:0 0 18px}
body.page-id-285614 #cek-facade .about-prose .about-text-link{display:inline-block;margin-top:8px}
body.page-id-285614 #cek-facade .about-expertise{padding:104px 0;background:#fafafa}
body.page-id-285614 #cek-facade .about-intro{max-width:720px;margin-bottom:52px}
body.page-id-285614 #cek-facade .about-intro h2{margin:14px 0 14px}
body.page-id-285614 #cek-facade .about-intro>p{font-size:18px;color:var(--muted);max-width:55ch}
body.page-id-285614 #cek-facade .about-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-proof-grid article{min-height:200px;padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
body.page-id-285614 #cek-facade .about-proof-grid strong{display:block;font-size:23px;line-height:1.2;margin-bottom:12px;font-weight:600}
body.page-id-285614 #cek-facade .about-proof-grid p{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:40ch}
body.page-id-285614 #cek-facade .about-roles{padding:112px 0;background:#151515;color:#fff}
body.page-id-285614 #cek-facade .about-intro-light h2{color:#fff}
body.page-id-285614 #cek-facade .about-intro-light>p{color:#bbb6af}
body.page-id-285614 #cek-facade .about-intro-light .eyebrow{color:#67dce8}
body.page-id-285614 #cek-facade .about-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#3a3937;border:1px solid #3a3937;border-radius:24px;overflow:hidden}
body.page-id-285614 #cek-facade .about-role-grid article{padding:34px;background:#1b1b1b;min-height:270px}
body.page-id-285614 #cek-facade .about-role-grid article>span{display:block;color:#67dce8;font-size:12px;font-weight:700;letter-spacing:.12em;margin-bottom:48px}
body.page-id-285614 #cek-facade .about-role-grid h3{font-size:25px;color:#fff;margin-bottom:13px}
body.page-id-285614 #cek-facade .about-role-grid p{font-size:15.5px;line-height:1.62;color:#c8c4bf}
body.page-id-285614 #cek-facade .about-light-link{display:inline-block;margin-top:28px;color:#fff;text-decoration:none;font-weight:600}
body.page-id-285614 #cek-facade .about-light-link:hover{text-decoration:underline;text-underline-offset:4px}
body.page-id-285614 #cek-facade .about-cuisine{padding:112px 0;background:#f6f3ee}
body.page-id-285614 #cek-facade .about-cuisine-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,8vw,110px);align-items:center}
body.page-id-285614 #cek-facade .about-cuisine-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.page-id-285614 #cek-facade .about-cuisine-media{display:block;overflow:hidden;border-radius:26px;background:#e8e4dc;box-shadow:0 18px 55px rgba(35,29,24,.1)}
body.page-id-285614 #cek-facade .about-cuisine-media img{display:block;width:100%;height:auto;aspect-ratio:720/406;object-fit:cover;transition:transform .4s ease}
body.page-id-285614 #cek-facade .about-cuisine-media:hover img{transform:scale(1.025)}
body.page-id-285614 #cek-facade .about-cuisine-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
body.page-id-285614 #cek-facade .about-cuisine-copy h2{font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.04em;font-weight:600;margin:14px 0 22px}
body.page-id-285614 #cek-facade .about-cuisine-date{display:block;margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-align:right;white-space:nowrap}
body.page-id-285614 #cek-facade .about-cuisine-copy>p{font-size:18px;line-height:1.65;color:var(--muted);max-width:48ch;margin-bottom:26px}
body.page-id-285614 #cek-facade .about-cuisine-copy .btn{margin-bottom:28px}
body.page-id-285614 #cek-facade .about-cuisine-copy .about-cuisine-next{font-size:15px;line-height:1.55;margin:0;color:#5e5a55}
body.page-id-285614 #cek-facade .about-cuisine-next strong{color:var(--ink)}
body.page-id-285614 #cek-facade .about-future{padding:96px 0;background:#fff}
body.page-id-285614 #cek-facade .about-future-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,8vw,110px);align-items:center}
body.page-id-285614 #cek-facade .about-future-media-grid{display:grid;grid-template-columns:1fr;gap:18px}
body.page-id-285614 #cek-facade .about-future-copy h2{font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.04em;font-weight:600;margin:14px 0 22px}
body.page-id-285614 #cek-facade .about-future-copy>p{font-size:18px;line-height:1.65;color:var(--muted);max-width:48ch;margin-bottom:26px}
body.page-id-285614 #cek-facade .about-future-media-grid .about-cuisine-media{position:relative}
body.page-id-285614 #cek-facade .about-future-badge{position:absolute;top:18px;right:18px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 5px 18px rgba(35,29,24,.14)}
body.page-id-285614 #cek-facade .about-choice{padding:112px 0}
body.page-id-285614 #cek-facade .about-choice-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.85fr);gap:clamp(50px,8vw,110px);align-items:center}
body.page-id-285614 #cek-facade .about-choice h2{margin:14px 0 24px;max-width:13ch}
body.page-id-285614 #cek-facade .about-choice-copy>p{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:16px;max-width:54ch}
body.page-id-285614 #cek-facade .about-choice-copy .about-text-link{display:inline-block;margin-top:8px}
body.page-id-285614 #cek-facade .about-choice-card{border:1px solid var(--line);border-radius:26px;padding:12px;background:#fff;box-shadow:0 18px 55px rgba(35,29,24,.09)}
body.page-id-285614 #cek-facade .about-choice-label{padding:16px 18px 12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
body.page-id-285614 #cek-facade .about-choice-card>a{display:flex;flex-direction:column;gap:4px;padding:20px 18px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background .18s,transform .18s}
body.page-id-285614 #cek-facade .about-choice-card>a+a{border-top:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-choice-card>a:hover{background:#eef6ff;transform:translateX(3px)}
body.page-id-285614 #cek-facade .about-choice-card b{font-size:17px;font-weight:600}
body.page-id-285614 #cek-facade .about-choice-card span{font-size:14px;color:var(--muted)}
body.page-id-285614 #cek-facade .about-identity{padding:82px 0;background:#f6f3ee}
body.page-id-285614 #cek-facade .about-identity-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:clamp(48px,8vw,100px);align-items:start}
body.page-id-285614 #cek-facade .about-identity h2{font-size:clamp(30px,3.5vw,46px);margin-top:14px;max-width:17ch}
body.page-id-285614 #cek-facade .about-identity-note{max-width:42ch;margin:18px 0 0;color:var(--muted);font-size:17px;line-height:1.6}
body.page-id-285614 #cek-facade .about-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:3px}
body.page-id-285614 #cek-facade .about-contact>a{font-size:18px;font-weight:600;color:var(--blue);text-decoration:none;overflow-wrap:anywhere}
body.page-id-285614 #cek-facade .about-contact>p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:10px}
body.page-id-285614 #cek-facade .about-contact nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
body.page-id-285614 #cek-facade .about-contact nav a{font-size:13.5px;color:var(--ink);text-underline-offset:3px}
body.page-id-285614 #cek-facade .about-final{padding:112px 0;text-align:center}
body.page-id-285614 #cek-facade .about-final-in{display:flex;flex-direction:column;align-items:center}
body.page-id-285614 #cek-facade .about-final h2{max-width:17ch;margin:14px auto 18px}
body.page-id-285614 #cek-facade .about-final p{font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch;margin-bottom:28px}
body.page-id-285614 #cek-facade .about-progress{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:900px;margin:18px auto 0}
body.page-id-285614 #cek-facade .about-progress>span{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:15px;font-weight:600;background:#fff}
body.page-id-285614 #cek-facade .about-progress em{font-style:normal;color:var(--accent);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-hero{padding:58px 0 70px}body.page-id-285614 #cek-facade .about-hero-grid,body.page-id-285614 #cek-facade .about-cuisine-grid,body.page-id-285614 #cek-facade .about-choice-grid,body.page-id-285614 #cek-facade .about-identity-in{grid-template-columns:1fr}body.page-id-285614 #cek-facade .about-hero-grid{gap:42px}body.page-id-285614 #cek-facade .about-hero h1{max-width:15ch}body.page-id-285614 #cek-facade .about-story,body.page-id-285614 #cek-facade .about-expertise,body.page-id-285614 #cek-facade .about-roles,body.page-id-285614 #cek-facade .about-cuisine,body.page-id-285614 #cek-facade .about-choice,body.page-id-285614 #cek-facade .about-final{padding:84px 0}body.page-id-285614 #cek-facade .about-story-grid,body.page-id-285614 #cek-facade .about-choice-grid,body.page-id-285614 #cek-facade .about-identity-in{gap:42px}body.page-id-285614 #cek-facade .about-prose{padding-top:26px}body.page-id-285614 #cek-facade .about-role-grid{grid-template-columns:1fr}body.page-id-285614 #cek-facade .about-role-grid article{min-height:0}body.page-id-285614 #cek-facade .about-role-grid article>span{margin-bottom:24px}}
@media(max-width:640px){body.page-id-285614 #cek-facade .about-shell{width:min(100% - 40px,1160px)}body.page-id-285614 #cek-facade .about-hero{padding:42px 0 54px}body.page-id-285614 #cek-facade .about-hero h1{font-size:38px;line-height:1.02;margin:13px 0 18px}body.page-id-285614 #cek-facade .about-lead{font-size:16.5px}body.page-id-285614 #cek-facade .about-actions{width:100%;margin-top:24px}body.page-id-285614 #cek-facade .about-actions .btn{width:100%}body.page-id-285614 #cek-facade .about-hero-media{border-radius:20px}body.page-id-285614 #cek-facade .about-future-media-grid{grid-template-columns:1fr;gap:14px}body.page-id-285614 #cek-facade .about-future{padding:64px 0}body.page-id-285614 #cek-facade .about-story,body.page-id-285614 #cek-facade .about-expertise,body.page-id-285614 #cek-facade .about-roles,body.page-id-285614 #cek-facade .about-cuisine,body.page-id-285614 #cek-facade .about-choice,body.page-id-285614 #cek-facade .about-final{padding:64px 0}body.page-id-285614 #cek-facade .about-identity{padding:58px 0}body.page-id-285614 #cek-facade .about-story h2,body.page-id-285614 #cek-facade .about-intro h2,body.page-id-285614 #cek-facade .about-choice h2,body.page-id-285614 #cek-facade .about-identity h2,body.page-id-285614 #cek-facade .about-final h2{font-size:32px}body.page-id-285614 #cek-facade .about-story-intro{max-width:none;margin-bottom:28px}body.page-id-285614 #cek-facade .about-story-media{float:none;width:100%;margin:0 0 26px;border-radius:18px}body.page-id-285614 #cek-facade .about-prose p{font-size:16.5px}body.page-id-285614 #cek-facade .about-intro{margin-bottom:32px}body.page-id-285614 #cek-facade .about-proof-grid{grid-template-columns:1fr}body.page-id-285614 #cek-facade .about-proof-grid article{min-height:0;padding:26px 24px}body.page-id-285614 #cek-facade .about-role-grid{border-radius:18px}body.page-id-285614 #cek-facade .about-role-grid article{padding:26px 24px}body.page-id-285614 #cek-facade .about-choice-card{border-radius:20px}body.page-id-285614 #cek-facade .about-final p{font-size:16.5px}}
/* Traitement informationnel : pas de codes visuels de fiche produit. */
body.page-id-285614 #cek-facade .about-hero{background:#fff;padding:96px 0 110px}
body.page-id-285614 #cek-facade .about-hero-grid{grid-template-columns:minmax(0,.84fr) minmax(440px,1.16fr);gap:clamp(56px,8vw,118px)}
body.page-id-285614 #cek-facade .about-hero h1{font-size:clamp(40px,4.6vw,62px);max-width:13ch}
body.page-id-285614 #cek-facade .about-hero-media{border-radius:4px;box-shadow:none}
body.page-id-285614 #cek-facade .about-actions .btn{width:auto;min-height:0;padding:0 0 3px;border-radius:0;background:transparent;color:var(--blue);border-bottom:1px solid currentColor;font-size:16px}
body.page-id-285614 #cek-facade .about-actions .btn:hover{background:transparent;color:#005bb5}
body.page-id-285614 #cek-facade .about-story{background:#f6f3ee}
body.page-id-285614 #cek-facade .about-expertise{background:#fff}
body.page-id-285614 #cek-facade .about-price{background:#f6f3ee}
body.page-id-285614 #cek-facade .about-price-card{max-width:860px;margin:38px auto 0;padding:clamp(28px,4vw,52px);background:#fff;border:1px solid rgba(18,33,50,.1);border-radius:28px;box-shadow:0 18px 55px rgba(35,29,24,.08)}
body.page-id-285614 #cek-facade .about-price-question{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;color:var(--muted)}
body.page-id-285614 #cek-facade .about-price-question strong{color:var(--ink);font-size:19px}
body.page-id-285614 #cek-facade .about-price-range-label{display:block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
body.page-id-285614 #cek-facade .about-price-range{display:block;width:100%;accent-color:var(--blue);cursor:pointer}
body.page-id-285614 #cek-facade .about-price-value{display:block;margin:12px 0 30px;text-align:center;font-size:clamp(38px,6vw,62px);line-height:1;font-weight:700;color:var(--blue)}
body.page-id-285614 #cek-facade .about-price-bars{display:grid;gap:24px}
body.page-id-285614 #cek-facade .about-price-bar-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
body.page-id-285614 #cek-facade .about-price-bar-head b{color:var(--blue);font-size:22px}
body.page-id-285614 #cek-facade .about-price-track{height:14px;margin:9px 0 8px;border-radius:99px;background:#e5e9ee;overflow:hidden}
body.page-id-285614 #cek-facade .about-price-track span{display:block;height:100%;width:45%;border-radius:inherit;background:var(--blue);transition:width .18s ease}
body.page-id-285614 #cek-facade .about-price-bar--cek .about-price-track span{background:#f07821}
body.page-id-285614 #cek-facade .about-price-bar small{color:var(--muted)}
body.page-id-285614 #cek-facade .about-price-note{margin:30px 0 0;padding-top:22px;border-top:1px solid rgba(18,33,50,.1);color:var(--muted);line-height:1.6}
body.page-id-285614 #cek-facade .about-price-foot{max-width:700px;margin:54px auto 0;text-align:center}
body.page-id-285614 #cek-facade .about-price-foot h3{font-size:clamp(25px,3vw,36px);margin:0 0 12px}
body.page-id-285614 #cek-facade .about-price-foot p{color:var(--muted);line-height:1.65;margin:0 auto 24px}
@media(max-width:640px){body.page-id-285614 #cek-facade .about-price-card{border-radius:20px;margin-top:28px;padding:26px 20px}body.page-id-285614 #cek-facade .about-price-bar-head{align-items:flex-start}body.page-id-285614 #cek-facade .about-price-bar-head strong{max-width:70%}}
body.page-id-285614 #cek-facade .about-proof-grid{gap:0 64px;border:0}
body.page-id-285614 #cek-facade .about-proof-grid article{min-height:0;padding:30px 0 36px;border:0;border-top:1px solid var(--line);background:transparent}
body.page-id-285614 #cek-facade .about-roles{background:#f6f3ee;color:var(--ink)}
body.page-id-285614 #cek-facade .about-intro-light h2{color:var(--ink)}
body.page-id-285614 #cek-facade .about-intro-light>p{color:var(--muted)}
body.page-id-285614 #cek-facade .about-intro-light .eyebrow{color:var(--accent)}
body.page-id-285614 #cek-facade .about-role-grid{gap:46px;background:transparent;border:0;border-radius:0;overflow:visible}
body.page-id-285614 #cek-facade .about-role-grid article{min-height:0;padding:28px 0 0;border-top:1px solid #cbc6bf;background:transparent}
body.page-id-285614 #cek-facade .about-role-grid article>span{color:var(--accent);margin-bottom:28px}
body.page-id-285614 #cek-facade .about-role-grid h3{color:var(--ink)}
body.page-id-285614 #cek-facade .about-role-grid p{color:#5e5a55}
body.page-id-285614 #cek-facade .about-light-link{color:var(--blue)}
body.page-id-285614 #cek-facade .about-choice{background:#fff}
body.page-id-285614 #cek-facade .about-choice-card{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
body.page-id-285614 #cek-facade .about-choice-label{padding:0 0 15px;border-bottom:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-choice-card>a{padding:22px 0;border-radius:0;border-bottom:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-choice-card>a+a{border-top:0}
body.page-id-285614 #cek-facade .about-choice-card>a:hover{background:transparent;color:var(--blue);transform:none}
body.page-id-285614 #cek-facade .about-identity{background:#fafafa;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.page-id-285614 #cek-facade .about-final{background:#fff}
body.page-id-285614 #cek-facade .about-final .btn{min-height:0;padding:0 0 4px;border-radius:0;background:transparent;color:var(--blue);border-bottom:1px solid currentColor}
body.page-id-285614 #cek-facade .about-final .btn:hover{background:transparent;color:#005bb5}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-hero{padding:70px 0 82px}body.page-id-285614 #cek-facade .about-hero-grid{grid-template-columns:1fr;gap:46px}body.page-id-285614 #cek-facade .about-role-grid{gap:32px}}
@media(max-width:640px){body.page-id-285614 #cek-facade .about-hero{padding:48px 0 62px}body.page-id-285614 #cek-facade .about-actions{align-items:flex-start}body.page-id-285614 #cek-facade .about-actions .btn{width:auto}body.page-id-285614 #cek-facade .about-proof-grid article{padding:24px 0 28px}body.page-id-285614 #cek-facade .about-role-grid{gap:24px}body.page-id-285614 #cek-facade .about-role-grid article{padding:24px 0 0}}
/* Page devis 606 : cadrage de la mariniere et video contenue. */
body.page-id-606 #cek-facade .scene{width:min(1080px,calc(100% - 48px));margin:clamp(60px,7vw,88px) auto 0}
body.page-id-606 #cek-facade .scene video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;background:#111}
@media(max-width:900px){
body.page-id-606 #cek-facade .hero-bg{object-position:28% center}
body.page-id-606 #cek-facade .scene{width:min(100% - 40px,760px);margin-top:60px}
}
@media(max-width:560px){
body.page-id-606 #cek-facade .hero-bg{object-position:22% center}
body.page-id-606 #cek-facade .scene{width:100%;margin-top:52px}
}
/* Correctifs de pages encore utilisees, recuperes des lots valides. */
body.page-id-306 #prise-en-main .env:nth-child(2) img{object-position:center 34%}
@media(min-width:1001px){
body.page-id-306 #cek-facade #limite .lim-head{max-width:1160px}
body.page-id-306 #cek-facade #limite .lim-head h2{white-space:nowrap}
body.page-id-309320 #cek-facade #deconseiller .lim-head-full{max-width:1160px}
body.page-id-309320 #cek-facade #deconseiller .lim-head-full h2{white-space:nowrap}
}
@media(max-width:1000px){
body.page-id-306 #cek-facade #limite .lim-head h2,
body.page-id-309320 #cek-facade #deconseiller .lim-head-full h2{white-space:normal}
}
body.page-id-309487 #cek-facade .quadro-slim-image{width:min(960px,calc(100% - 48px));margin-inline:auto;border-radius:20px;overflow:hidden;background:var(--mist)}
body.page-id-309487 #cek-facade .quadro-slim-image figure{margin:0;line-height:0}
body.page-id-309487 #cek-facade .quadro-slim-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
body.page-id-309384 #cek-facade .scene,
body.page-id-299175 #cek-facade .scene,
body.page-id-286098 #cek-facade .scene{width:min(960px,calc(100% - 48px));margin:32px auto 0;border-radius:20px;overflow:hidden}
body.page-id-309384 #cek-facade .scene video,
body.page-id-299175 #cek-facade .scene video,
body.page-id-286098 #cek-facade .scene video{width:100%;height:auto;max-height:none;object-fit:contain}
body.page-id-286098 #cek-facade .scene video{aspect-ratio:16/9}
body.page-id-299175 #cek-facade .scene video{pointer-events:auto!important}
body.page-id-309384 #cek-facade .scene .scene-legende,
body.page-id-299175 #cek-facade .scene .scene-legende,
body.page-id-606 #cek-facade .scene .scene-legende{position:static;padding:16px 24px;background:var(--mist);color:var(--ink)}
body.page-id-309384 #cek-facade .scene .scene-legende span,
body.page-id-299175 #cek-facade .scene .scene-legende span,
body.page-id-606 #cek-facade .scene .scene-legende span{display:block;color:var(--muted)}
@media(min-width:601px){body.page-id-286098 #trois-modeles .envie-grid>.env:nth-child(2) img{object-position:center 25%}}
@media(min-width:901px){body.page-id-286098 #matiere-du-creux .fin-card:last-child{grid-column:1/-1;width:calc((100% - 18px)/2);margin-inline:auto}}
@media(max-width:600px){
body.page-id-266216 #cek-facade .hero-bg{object-position:70% 50%}
body.page-id-309487 #cek-facade .quadro-slim-image{width:calc(100% - 32px);border-radius:12px}
body.page-id-309487 #cek-facade .quadro-slim-image img{max-height:none}
body.page-id-309384 #cek-facade .scene,
body.page-id-299175 #cek-facade .scene,
body.page-id-286098 #cek-facade .scene{width:calc(100% - 32px);margin-top:24px;border-radius:12px}
body.page-id-309384 #cek-facade .scene .scene-legende,
body.page-id-299175 #cek-facade .scene .scene-legende,
body.page-id-606 #cek-facade .scene .scene-legende{padding:14px 18px}
}
body.page-id-285614 #cek-facade .about-price-card{box-shadow:0 10px 30px rgba(35,29,24,.06)}
body.page-id-285614 #cek-facade .about-price-value{margin:14px 0 24px;font-size:clamp(28px,4vw,42px);font-weight:600}
body.page-id-285614 #cek-facade .about-price-question strong{font-size:17px;font-weight:650}
body.page-id-285614 #cek-facade .about-price-range{height:32px;margin:8px 0 4px;appearance:none;background:transparent}
body.page-id-285614 #cek-facade .about-price-range::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:#d7dde5;border:1px solid #b8c2cf}
body.page-id-285614 #cek-facade .about-price-range::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-9px;border:4px solid #fff;border-radius:50%;background:var(--blue,#1769d1);box-shadow:0 2px 8px rgba(18,33,50,.32);cursor:grab}
body.page-id-285614 #cek-facade .about-price-range:active::-webkit-slider-thumb{cursor:grabbing}
body.page-id-285614 #cek-facade .about-price-range::-moz-range-track{height:10px;border-radius:99px;background:#d7dde5;border:1px solid #b8c2cf}
body.page-id-285614 #cek-facade .about-price-range::-moz-range-progress{height:10px;border-radius:99px;background:var(--blue,#1769d1)}
body.page-id-285614 #cek-facade .about-price-range::-moz-range-thumb{width:20px;height:20px;border:4px solid #fff;border-radius:50%;background:var(--blue,#1769d1);box-shadow:0 2px 8px rgba(18,33,50,.32);cursor:grab}
body.page-id-285614 #cek-facade .about-price-range:focus-visible{outline:3px solid rgba(23,105,209,.3);outline-offset:5px}
body.page-id-285614 #cek-facade .about-price-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:860px;margin:34px auto 0;padding:20px 24px;border:1px solid rgba(18,33,50,.16);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-weight:650;text-align:left;cursor:pointer;box-shadow:0 6px 20px rgba(35,29,24,.05)}
body.page-id-285614 #cek-facade .about-price-toggle span{color:var(--blue);font-size:25px;line-height:1}
body.page-id-285614 #cek-facade .about-price-toggle:hover{border-color:var(--blue);box-shadow:0 8px 24px rgba(23,105,209,.12)}
body.page-id-285614 #cek-facade .about-price-panel{max-width:860px;margin:0 auto}
body.page-id-285614 #cek-facade .about-price-panel[hidden]{display:none}
body.page-id-285614 #cek-facade .about-price-toggle{gap:18px}
body.page-id-285614 #cek-facade .about-price-chevron{width:10px;height:10px;flex:0 0 10px;border-right:2px solid var(--blue,#1769d1);border-bottom:2px solid var(--blue,#1769d1);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
body.page-id-285614 #cek-facade .about-price-toggle.is-open .about-price-chevron{transform:rotate(225deg) translate(-2px,-2px)}
body.page-id-285614 #cek-facade .about-price-guess{max-width:760px;margin:34px auto 0;padding:30px 32px;background:#fff;border:1px solid rgba(18,33,50,.12);border-radius:22px;box-shadow:0 10px 30px rgba(35,29,24,.06)}
body.page-id-285614 #cek-facade .about-price-tag{display:inline-block;margin-bottom:14px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
body.page-id-285614 #cek-facade .about-price-question{font-size:20px;line-height:1.45;margin:0 0 12px}
body.page-id-285614 #cek-facade .about-price-how{font-size:15px;color:var(--muted);margin:0 0 20px}
body.page-id-285614 #cek-facade .about-price-how:before{content:'↔';margin-right:8px;color:var(--blue);font-size:18px}
body.page-id-285614 #cek-facade .about-price-guess-control{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:center}.about-price-guess-value{font-size:32px;font-weight:600;white-space:nowrap}.about-price-guess-value small{font-size:14px;color:var(--muted);font-weight:400}.about-price-guess-control input{width:100%;accent-color:var(--blue);height:38px}.about-price-ends{grid-column:2;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.about-price-guess .btn{margin-top:20px}.about-price-results{max-width:860px;margin:30px auto 0}.about-price-result-row{margin-bottom:24px}.about-price-bar-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.about-price-bar-head b{color:var(--blue)}.about-price-segments{display:flex;height:42px;border-radius:10px;overflow:hidden;color:#fff;font-size:13px}.about-price-segment{display:flex;align-items:center;justify-content:center;padding:0 8px;text-align:center}.about-price-segment--fabrication{background:#3f7c61}.about-price-segment--strong{background:#3f7c61}.about-price-segment--other{background:#8e8b85}.about-price-segment--logistics{background:#9e9a93}.about-price-legend{display:flex;flex-wrap:wrap;gap:12px 22px;color:var(--muted);font-size:13px;margin:18px 0}.about-price-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#3f7c61;margin-right:6px}.about-price-legend span:nth-child(2) i{background:#8e8b85}.about-price-legend span:nth-child(3) i{background:#9e9a93}.about-price-answer{padding:20px 22px;background:#eaf4ec;border:1px solid #bfdcc8;border-radius:16px;line-height:1.55}.about-price-answer strong{display:block;margin-bottom:7px;color:#2f6b51;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.about-price-answer span{display:block;margin-top:12px;font-weight:700;color:#24573f;font-size:18px}.about-price-results[hidden]{display:none}
@media(max-width:640px){body.page-id-285614 #cek-facade .about-price-guess{padding:24px 20px;border-radius:18px}.about-price-question{font-size:18px!important}.about-price-guess-control{grid-template-columns:1fr}.about-price-ends{grid-column:1}.about-price-segments{height:52px;font-size:11px}.about-price-segment--other{font-size:0}.about-price-segment--other:after{content:'Distribution';font-size:11px}}
body.page-id-285614 #cek-facade .about-price-question{white-space:nowrap}
body.page-id-285614 #cek-facade .about-price-guess-control input[type=range]{display:block;min-width:180px;height:38px;appearance:none;background:transparent;accent-color:#1769d1}
body.page-id-285614 #cek-facade .about-price-guess-control input[type=range]::-webkit-slider-runnable-track{height:10px;border:1px solid #aab6c5;border-radius:99px;background:#dbe2ea}
body.page-id-285614 #cek-facade .about-price-guess-control input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;margin-top:-8px;border:4px solid #fff;border-radius:50%;background:#1769d1;box-shadow:0 2px 8px rgba(18,33,50,.32);cursor:grab}
body.page-id-285614 #cek-facade .about-price-guess-control input[type=range]::-moz-range-track{height:10px;border:1px solid #aab6c5;border-radius:99px;background:#dbe2ea}
body.page-id-285614 #cek-facade .about-price-guess-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:#1769d1;box-shadow:0 2px 8px rgba(18,33,50,.32);cursor:grab}
@media(max-width:640px){body.page-id-285614 #cek-facade .about-price-question{white-space:normal}}
body.page-id-285614 #cek-facade .about-price-question-lead{display:inline-block;white-space:nowrap}
body.page-id-285614 #cek-facade .about-price-question{max-width:100%;overflow-wrap:break-word;word-break:normal}
body.page-id-285614 #cek-facade .about-price-question{white-space:normal}
body.page-id-285614 #cek-facade .about-price-question-lead{max-width:100%;white-space:nowrap}
body.page-id-285614 #cek-facade .about-role-grid--partnership{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-role-grid--partnership{grid-template-columns:1fr}}
body.page-id-285614 #cek-facade .about-role-grid--partnership{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-role-grid--partnership{grid-template-columns:1fr}}
body.page-id-285614 #cek-facade .about-contact{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
body.page-id-285614 #cek-facade .about-contact-hours{font-size:13px;color:var(--muted);text-align:center}
body.page-id-285614 #cek-facade .about-contact-delivery{width:100%;box-sizing:border-box;margin-top:22px;padding:14px 16px;border:1px solid rgba(18,33,50,.12);border-radius:14px;background:#fff;color:var(--muted);font-size:14px;line-height:1.45;text-align:left;box-shadow:0 6px 20px rgba(35,29,24,.05)}
body.page-id-285614 #cek-facade .about-delivery-country{display:inline;color:var(--blue);font-weight:700}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-contact{align-items:center}body.page-id-285614 #cek-facade .about-contact-hours,body.page-id-285614 #cek-facade .about-contact-delivery{text-align:center}body.page-id-285614 #cek-facade .about-contact-delivery{font-size:17px;line-height:1.55}}
body.page-id-285614 #cek-facade .about-contact-delivery-wrap{width:100%;margin-top:22px;text-align:left}
body.page-id-285614 #cek-facade .about-contact-delivery-label{margin:0 0 8px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
body.page-id-285614 #cek-facade .about-contact-delivery-wrap .about-contact-delivery{margin-top:0}
@media(max-width:900px){body.page-id-285614 #cek-facade .about-contact-delivery-wrap{text-align:center}}
body.page-id-273663 #cek-facade .livraison-hero-delivery-wrap{width:min(100%,560px);margin:18px auto 5px;text-align:center}
body.page-id-273663 #cek-facade .livraison-hero-delivery-label{margin:0 0 8px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
body.page-id-273663 #cek-facade .livraison-hero-delivery{box-sizing:border-box;width:100%;padding:14px 16px;border:1px solid rgba(18,33,50,.12);border-radius:14px;background:#fff;color:var(--muted);font-size:14px;line-height:1.45;text-align:center;box-shadow:0 6px 20px rgba(35,29,24,.05)}
body.page-id-273663 #cek-facade .livraison-delivery-country{display:inline;color:var(--blue);font-weight:700}
body.page-id-285614 #cek-facade .about-future-badge{background:rgba(18,33,50,.82);color:#fff;top:18px;right:18px}
body.page-id-285614 #cek-facade .about-identity-in{align-items:center}
body.page-id-285614 #cek-facade .about-contact-delivery-label{margin-left:10px}
body.page-id-285614 #cek-facade .about-story-highlight{color:var(--blue);font-weight:600}
/* Progression de marque : grille autonome, sans hériter de la largeur des H2 éditoriaux. */
body.page-id-285614 #cek-facade .about-final p{margin-bottom:0}
body.page-id-285614 #cek-facade .about-final-brand{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;margin:28px auto 0}
body.page-id-285614 #cek-facade .about-final-brand .cekonay-logo-main{font-size:19px;font-weight:650;letter-spacing:-.03em}
body.page-id-285614 #cek-facade .about-final-brand .cekonay-logo-sub{align-self:flex-end;margin-top:2px;padding-right:.12em;color:var(--accent);font-size:7.5px;font-weight:700;letter-spacing:.1em}
body.page-id-285614 #cek-facade .about-final-brand .cekonay-logo-main>span,body.page-id-285614 #cek-facade .about-final-brand .cekonay-logo-sub{color:#c65a16}
body.page-id-285614 #cek-facade .about-final h2.about-final-catalogue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:820px;margin:26px auto 0;gap:12px;font-size:15px;line-height:1.3;letter-spacing:0}
body.page-id-285614 #cek-facade .about-final-catalogue>span{display:flex;min-width:0;min-height:76px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:15px 12px;border:1px solid rgba(18,33,50,.1);border-radius:14px;background:#fff;white-space:normal;text-align:center;overflow-wrap:anywhere;box-shadow:0 8px 24px rgba(18,33,50,.05)}
body.page-id-285614 #cek-facade .about-final-catalogue em{font-style:normal;color:var(--accent);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:900px){
body.page-id-285614 #cek-facade .about-story-media{float:none;width:100%;margin:0 0 30px;border-radius:18px}
body.page-id-285614 #cek-facade .about-story-media video{aspect-ratio:16/9}
body.page-id-285614 #cek-facade .about-cuisine-media img,body.page-id-285614 #cek-facade .about-future-media-grid img{width:100%;height:auto;display:block}
body.page-id-285614 #cek-facade .about-cuisine-copy{padding-top:8px}
body.page-id-285614 #cek-facade .about-future-grid{grid-template-columns:1fr;gap:34px}
body.page-id-285614 #cek-facade .about-future-copy{order:-1;max-width:620px;padding-top:0}
body.page-id-285614 #cek-facade .about-final h2.about-final-catalogue{max-width:680px;gap:10px;font-size:14px}
}
@media(max-width:640px){
body.page-id-285614 #cek-facade .about-story-media{margin-bottom:24px;border-radius:16px}
body.page-id-285614 #cek-facade .about-cuisine-media{border-radius:18px}
body.page-id-285614 #cek-facade .about-future-media-grid .about-cuisine-media{width:100%}
body.page-id-285614 #cek-facade .about-future{padding:58px 0}
body.page-id-285614 #cek-facade .about-future-grid{gap:28px}
body.page-id-285614 #cek-facade .about-future-copy h2{font-size:32px;margin:12px 0 16px}
body.page-id-285614 #cek-facade .about-future-copy>p{font-size:16.5px;line-height:1.58;margin-bottom:18px}
body.page-id-285614 #cek-facade .about-future-media-grid{grid-template-columns:1fr;gap:14px}
body.page-id-285614 #cek-facade .about-future-badge{top:10px;right:10px;bottom:auto;left:auto;padding:6px 8px;font-size:8px;line-height:1.25;text-align:right;color:#fff;white-space:nowrap}
body.page-id-285614 #cek-facade .about-final-brand{margin-top:24px}
body.page-id-285614 #cek-facade .about-final h2.about-final-catalogue{grid-template-columns:repeat(2,minmax(0,1fr));max-width:350px;margin-top:22px;gap:10px;font-size:14px}
body.page-id-285614 #cek-facade .about-final-catalogue>span{min-height:72px;padding:13px 8px}
}
/* Sécurité tablette : les sections restent lisibles avant le breakpoint téléphone. */
@media(max-width:1100px){
body.page-id-285614 #cek-facade .about-future-grid{grid-template-columns:1fr;gap:34px;min-width:0}
body.page-id-285614 #cek-facade .about-future-copy{order:-1;min-width:0;max-width:680px}
body.page-id-285614 #cek-facade .about-future-media-grid{grid-template-columns:1fr;min-width:0}
body.page-id-285614 #cek-facade .about-future-media-grid .about-cuisine-media,
body.page-id-285614 #cek-facade .about-future-media-grid img{width:100%;min-width:0}
body.page-id-285614 #cek-facade .about-price-question{white-space:normal;overflow-wrap:anywhere}
body.page-id-285614 #cek-facade .about-price-question-lead{white-space:normal}
}
@media(max-width:640px){
body.page-id-273663 #cek-facade .livraison-hero-delivery-wrap{width:calc(100% - 32px);margin-top:16px}
body.page-id-273663 #cek-facade .livraison-hero-delivery{padding:12px 14px;font-size:13px}
}
/* Click & Mesure : texte à droite du smartphone sur grand écran. */
@media(min-width:1024px){
body.page-id-317715 #cek-facade .hero::after{background:linear-gradient(90deg,rgba(22,21,20,0) 0%,rgba(22,21,20,0) 45%,rgba(22,21,20,.5) 66%,rgba(22,21,20,.94) 100%)}
body.page-id-317715 #cek-facade .hero .hero-in{max-width:1160px;padding:48px 24px 56px}
body.page-id-317715 #cek-facade .hero .hero-in>*{width:50%;max-width:none;margin-left:50%}
body.page-id-317715 #cek-facade .hero h1{font-size:clamp(32px,3.2vw,48px)}
}
/* Click & Mesure : visuel complémentaire dans la carte de réponse. */
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .answer-card{display:grid;grid-template-columns:1.2fr .85fr;gap:32px;align-items:center}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-visual{margin:0;border-radius:16px;overflow:hidden}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-visual>img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:35% center}
@media(max-width:1023px){
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .answer-card{display:block}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-visual{margin-top:28px}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-visual>img{height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center}
}
/* Mobile Click & Mesure : image lisible, texte compact en dessous. */
@media(max-width:600px){
body.page-id-317715 #cek-facade .hero{display:block;min-height:0;background:#1d2022}
body.page-id-317715 #cek-facade .hero .hero-bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
body.page-id-317715 #cek-facade .hero::after{display:none}
body.page-id-317715 #cek-facade .hero .hero-in{padding:24px 20px 28px;gap:12px}
body.page-id-317715 #cek-facade .hero h1{font-size:28px;line-height:1.12;max-width:none}
body.page-id-317715 #cek-facade .hero p{font-size:16px;line-height:1.45;margin:0}
body.page-id-317715 #cek-facade .hero small{font-size:14px;line-height:1.4}
body.page-id-317715 #cek-facade .hero .btn{font-size:15px}
}
/* Logo indépendant de la photo, avec contraste constant en clair et sombre. */
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-visual{position:relative}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-logo{position:absolute;top:14px;right:14px;display:block;width:232px;max-width:calc(100% - 28px);padding:10px 12px;background:rgba(255,255,255,.96);border-radius:10px}
body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-logo img{display:block;width:100%;height:auto;aspect-ratio:32/7;object-fit:contain}
@media(max-width:600px){body.page-id-317715 #cek-facade #a-quoi-sert-click-et-mesure .click-answer-logo{width:180px;top:10px;right:10px;padding:8px 10px}}
/* Click & Mesure : logo au-dessus du titre principal. */
body.page-id-317715 #cek-facade .hero picture.click-hero-logo{display:block;flex:0 0 auto;width:120px}
body.page-id-317715 #cek-facade .hero picture.click-hero-logo img{display:block;width:100%;height:auto;aspect-ratio:32/7}
@media(max-width:600px){
body.page-id-317715 #cek-facade .hero picture.click-hero-logo{width:112px}
}
/* Choix Click & Mesure, page 606 : cartes alignées et logo lisible sur la photo (validation locale, 3 octobre 2026). */
@media(min-width:901px){
body.page-id-606 #cek-facade #choix .fin-grid{grid-auto-rows:1fr}
body.page-id-606 #cek-facade #choix .fin-grid>.fin-card:nth-child(3):last-child{grid-column:1/-1;width:calc((100% - 18px)/2);justify-self:center}
}
body.page-id-606 #cek-facade #choix .fin-card>.btn{align-self:flex-start;margin-top:auto;padding:10px 22px;font-size:15px;line-height:1.25}
body.page-id-606 #cek-facade #choix .click-media-heading{display:grid;grid-template-columns:43% minmax(0,1fr);align-items:center;gap:15px}
body.page-id-606 #cek-facade #choix .click-media-heading .k{margin-bottom:7px}
body.page-id-606 #cek-facade #choix .click-photo{position:relative;display:block;height:116px;overflow:hidden;border-radius:10px}
body.page-id-606 #cek-facade #choix .click-photo>img:first-child{display:block;width:100%;height:100%;object-fit:cover;object-position:28% 50%}
body.page-id-606 #cek-facade #choix .click-photo .click-logo{position:absolute;top:9px;right:8px;display:block;width:78%;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.75))}
body.page-id-606 #cek-facade #choix .click-photo .click-logo img{display:block;width:100%;height:auto}
body.page-id-606 #cek-facade #choix .click-btn-line{display:inline}
@media(min-width:651px) and (max-width:900px){
body.page-id-606 #cek-facade #choix .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.page-id-606 #cek-facade #choix .fin-grid>.fin-card:nth-child(3):last-child{grid-column:1/-1;width:calc((100% - 18px)/2);justify-self:center}
}
@media(max-width:650px){
body.page-id-606 #cek-facade #choix .fin-grid{grid-template-columns:1fr}
body.page-id-606 #cek-facade #choix .fin-card.click-card:last-child{grid-column:auto;width:calc(100% - 24px);justify-self:center;padding:20px}
body.page-id-606 #cek-facade #choix .click-media-heading{grid-template-columns:1fr;gap:12px;text-align:center}
body.page-id-606 #cek-facade #choix .click-photo{width:100%;height:auto;aspect-ratio:3/2;margin:0}
body.page-id-606 #cek-facade #choix .fin-card.click-card .btn{align-self:center;max-width:100%;width:auto;gap:0;padding:10px 18px;text-align:center;flex-direction:column}
body.page-id-606 #cek-facade #choix .click-btn-line{display:block}
}
/* Page 606 : photo pleine largeur et libellé mobile validés, 3 octobre 2026. */
body.page-id-606 #cek-facade #choix .click-cta-brand{display:none}
@media(max-width:650px){body.page-id-606 #cek-facade #choix .click-photo>img:first-child{height:auto;aspect-ratio:3/2}body.page-id-606 #cek-facade #choix .click-cta-brand{display:block}}
/* Titre du choix : deux lignes sur ordinateur, souhaitez-vous insécable. */
@media(min-width:901px){body.page-id-606 #cek-facade #choix .s-head{max-width:none}body.page-id-606 #cek-facade #choix .s-head p{max-width:44ch}body.page-id-606 #cek-facade #choix .choice-question-first,body.page-id-606 #cek-facade #choix .choice-question-second{display:block}body.page-id-606 #cek-facade #choix .choice-question-first{white-space:nowrap}}
/* cekonay-home-anatomie-20261011 */
#cek-facade .lim-mobile-break{display:none}
#cek-facade .marques-in .marque-list-title{color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 -14px}
#cek-facade .marque-list .marque-all{background:#e8f5e9;border-color:#e8f5e9;color:#173c28;font-weight:700}
#cek-facade .answer-list{overflow:visible}
#cek-facade .answer-list .piece-chip{position:relative;appearance:none;border:1px solid var(--line);background:var(--paper,#fff);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;line-height:1.35;cursor:help;text-align:left;min-height:38px}
#cek-facade .answer-list .piece-chip:hover,#cek-facade .answer-list .piece-chip:focus-visible{border-color:var(--accent);color:var(--accent)}
#cek-facade .piece-definition{position:absolute;z-index:50;top:calc(100% + 9px);left:0;width:min(286px,calc(100vw - 56px));padding:13px 15px;border-radius:13px;background:#202a2d;color:#fff;box-shadow:0 12px 28px rgba(20,31,35,.18);font-size:13px;line-height:1.45;font-weight:450;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
#cek-facade .piece-chip:nth-child(even) .piece-definition{left:auto;right:0}
#cek-facade .piece-chip:hover .piece-definition,#cek-facade .piece-chip:focus .piece-definition{opacity:1;visibility:visible;transform:translateY(0)}
body.page-id-305065 #cek-facade .hero h1{font-size:clamp(34px,4vw,52px)!important;line-height:1.06;max-width:25ch}
#cek-facade .fin-card-head{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:start;width:100%}
#cek-facade .fin-card-meta{min-width:0;display:flex;flex-direction:column;gap:7px;padding-top:2px}
#cek-facade .fin-thumb{margin:0;min-width:0;text-align:center}
#cek-facade .fin-thumb img{display:block;width:76px;height:76px;object-fit:cover;border-radius:11px;margin:0 auto;background:var(--mist)}
#cek-facade .fin-thumb figcaption{font-size:11px;line-height:1.3;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}
#cek-facade .anatomy{padding:92px 0 0}
#cek-facade .anatomy-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,7vw,100px);align-items:end;margin-bottom:31px}
#cek-facade .anatomy-intro h2{font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.043em;max-width:16ch;margin:10px 0 0}
#cek-facade .anatomy-intro p{max-width:43ch;color:var(--muted);font-size:17px;line-height:1.58;padding-bottom:3px}
#cek-facade .anatomy-showcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:stretch}
#cek-facade .anatomy-photo{position:relative;margin:0;border-radius:22px;overflow:hidden;background:var(--mist);min-height:470px}
#cek-facade .anatomy-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#cek-facade .anatomy-photo figcaption{position:absolute;bottom:0;left:0;right:0;padding:45px 18px 17px;color:#fff;font-size:12px;font-weight:600;line-height:1.35;background:linear-gradient(transparent,rgba(0,0,0,.52))}
#cek-facade .anatomy-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--mist);border:1px solid var(--line);border-radius:22px;overflow:hidden}
#cek-facade .anatomy-fact{padding:19px 19px 18px;min-width:0;border-bottom:1px solid var(--line)}
#cek-facade .anatomy-fact:nth-child(odd){border-right:1px solid var(--line)}
#cek-facade .anatomy-fact:nth-last-child(-n+2){border-bottom:0}
#cek-facade .anatomy-fact span{display:block;color:var(--accent);font-size:10px;font-weight:750;letter-spacing:.095em;text-transform:uppercase;margin-bottom:8px}
#cek-facade .anatomy-fact h3{font-size:19px;line-height:1.15;margin:0 0 6px}
#cek-facade .anatomy-fact p{font-size:13.5px;line-height:1.47;color:var(--muted);margin:0}
#cek-facade .anatomy-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--blue-link);font-size:15px;font-weight:650;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media(max-width:900px){#cek-facade .anatomy{padding-top:60px}#cek-facade .anatomy-intro{grid-template-columns:1fr;gap:12px;margin-bottom:22px}#cek-facade .anatomy-intro h2{max-width:none}#cek-facade .anatomy-showcase{grid-template-columns:1fr;gap:13px}#cek-facade .anatomy-photo{min-height:0;aspect-ratio:16/7}#cek-facade .anatomy-fact{padding:18px 20px}#cek-facade .anatomy-fact p{font-size:14px}}
@media(max-width:900px){body.page-id-305065 #cek-facade .hero h1{font-size:clamp(32px,4.3vw,40px)!important;max-width:24ch}}
@media(max-width:560px){#cek-facade .anatomy-intro h2{font-size:34px;max-width:19ch}#cek-facade .anatomy-intro p{font-size:16px}#cek-facade .anatomy-photo{aspect-ratio:4/3}#cek-facade .anatomy-fact{padding:16px 13px}#cek-facade .anatomy-fact h3{font-size:17px}#cek-facade .anatomy-fact p{font-size:14px;line-height:1.45}#cek-facade .anatomy-fact span{font-size:10px;letter-spacing:.05em}#cek-facade .fin-card-head{grid-template-columns:minmax(0,1fr) 80px;gap:10px}#cek-facade .fin-thumb img{width:70px;height:70px}#cek-facade .fin-thumb figcaption{font-size:11px}#cek-facade .piece-definition{width:min(260px,calc(100vw - 55px))}}
@media(max-width:560px){body.page-id-305065 #cek-facade .hero h1{font-size:clamp(29px,8vw,33px)!important;line-height:1.08;max-width:22ch}#cek-facade .lim-mobile-break{display:block}}
@media(prefers-reduced-motion:reduce){#cek-facade .piece-definition{transition:none}}
/* Heros classiques : montrer davantage la photo sur ordinateur, sans changer mobile/tablette. */
@media (min-width: 1025px) {
#cek-facade .hero:not(.porteco-hero)::after { background: linear-gradient(to top, rgba(14,12,10,.84) 0%, rgba(14,12,10,.64) 26%, rgba(14,12,10,.24) 54%, rgba(14,12,10,0) 100%); }
#cek-facade .porteco-hero::after { background: linear-gradient(90deg, rgba(14,17,17,.82) 0%, rgba(14,17,17,.68) 36%, rgba(14,17,17,.34) 58%, rgba(14,17,17,.05) 100%); }
body.page-id-286223 #cek-facade .hero::after { background: linear-gradient(90deg, rgba(18,17,16,.82) 0%, rgba(18,17,16,.68) 34%, rgba(18,17,16,.32) 53%, rgba(18,17,16,.06) 78%); }
body.page-id-317715 #cek-facade .hero::after { background: linear-gradient(90deg, rgba(22,21,20,0) 0%, rgba(22,21,20,0) 45%, rgba(22,21,20,.42) 66%, rgba(22,21,20,.82) 100%); }
}
/* Cartouche « Le test d'une minute », page d'accueil 305065 uniquement. */
body.page-id-305065 #cek-facade .lim-test {
max-width: 780px;
gap: 20px;
}
body.page-id-305065 #cek-facade .lim-test-k {
margin: 0;
color: var(--accent);
font-size: clamp(14px, 1.15vw, 16px);
line-height: 1.3;
}
body.page-id-305065 #cek-facade .lim-test-p {
margin: 0;
max-width: 52ch;
font-size: clamp(16px, 1.45vw, 19px);
line-height: 1.55;
}
body.page-id-305065 #cek-facade .lim-test-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
width: 100%;
margin-top: 2px;
}
body.page-id-305065 #cek-facade .lim-test-v {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 112px;
max-width: none;
box-sizing: border-box;
margin: 0;
padding: 18px 20px;
border-radius: 16px;
background: var(--mist);
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.35;
letter-spacing: -.015em;
}
body.page-id-305065 #cek-facade .lim-test-question {
color: var(--muted);
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
}
body.page-id-305065 #cek-facade .lim-test-v strong {
color: var(--accent);
font-weight: 650;
}
body.page-id-305065 #cek-facade .lim-test-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
margin-top: 2px;
padding: 0 24px;
border-radius: 999px;
background: var(--blue);
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
}
body.page-id-305065 #cek-facade .lim-test-cta:hover {
background: #005bb8;
color: #fff;
}
body.page-id-305065 #cek-facade .lim-test-cta:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
@media (max-width: 820px) {
body.page-id-305065 #cek-facade .lim-test-checks {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 480px) {
body.page-id-305065 #cek-facade .lim-test {
padding: 28px 18px 24px;
gap: 16px;
}
body.page-id-305065 #cek-facade .lim-test-v {
min-height: 0;
padding: 16px;
font-size: 19px;
}
body.page-id-305065 #cek-facade .lim-test-cta {
width: 100%;
box-sizing: border-box;
padding: 0 14px;
}
}
/* Changer façade cuisine, carte « Le sur-mesure » : vignette du flamant à droite du texte dès 768 px, bandeau en haut de carte sur smartphone.
Le texte se resserre dans la colonne de gauche ; pastilles, bouton et mention restent pleine largeur.
Bas et bord gauche de la vignette en fondu vers le fond --night, pour qu'elle ne fasse pas tache. */
#cek-facade .marques-deco{display:block;width:calc(100% + 48px);max-width:none;height:300px;margin:-38px -24px 26px;object-fit:cover;object-position:50% 4%;border-radius:22px 22px 0 0;
-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
@media (min-width:768px){
#cek-facade .marques-in:has(>.marques-deco){display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,30%,330px);column-gap:clamp(32px,4vw,56px);align-items:start}
#cek-facade .marques-in:has(>.marques-deco)>*{grid-column:1}
#cek-facade .marques-in:has(>.marques-deco)>:is(.marque-list,.btn,.cek-legal){grid-column:1/-1}
#cek-facade .marques-in:has(>.marques-deco)>.btn{justify-self:start}
#cek-facade .marques-in>.marques-deco{display:block;grid-column:2;grid-row:1/span 4;width:100%;max-width:100%;margin:0;height:auto;aspect-ratio:3/4;object-position:50% 50%;object-fit:cover;border-radius:20px;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to bottom,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right,transparent 0,#000 22%),linear-gradient(to bottom,#000 62%,transparent 100%);mask-composite:intersect}
}
/* Trouver un poseur : « En bref, avant de commencer ». Photo du poseur à gauche, trois cubes isométriques
à arêtes arrondies (SVG, aucune image) posés au sol, dont la taille suit celle de la cuisine. */
#cek-facade .pose-bref{padding:88px 0 0}
#cek-facade .pose-bref__head{max-width:680px}
#cek-facade .pose-bref__head h2{font-size:clamp(28px,4vw,46px);line-height:1.08;margin:12px 0 14px;text-wrap:balance}
#cek-facade .pose-bref__head p{font-size:18px;color:var(--muted)}
#cek-facade .pose-bref__head p b{color:var(--ink);font-weight:600}
#cek-facade .pose-bref__scene{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin:40px 0 0;border-radius:28px;overflow:hidden;
background:linear-gradient(180deg,var(--paper) 0%,var(--mist) 60%,#ebe7e1 100%)}
#cek-facade .pose-bref__visuel{position:relative;margin:0;min-width:0}
#cek-facade .pose-bref__logo{position:absolute;right:16px;bottom:14px;display:block;line-height:0}
#cek-facade .pose-bref__logo img{width:104px;height:auto;display:block}
#cek-facade .pose-bref__photo{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:62% 55%;display:block;
-webkit-mask-image:linear-gradient(to right,#000 72%,transparent 100%);mask-image:linear-gradient(to right,#000 72%,transparent 100%)}
#cek-facade .pose-bref__sol{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,3vw,40px);padding:32px 24px 26px}
#cek-facade .pose-cube{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
@media (hover:hover) and (min-width:1025px){#cek-facade .pose-cube{cursor:default}#cek-facade .pose-cube__legende span{transition:transform .25s ease,color .25s ease}#cek-facade .pose-cube:hover .pose-cube__legende span{transform:scale(1.15);color:var(--accent)}}
#cek-facade .pose-cube__svg{display:block;max-width:100%;height:auto}
#cek-facade .pose-cube__forme{margin:0 0 4px;display:flex;flex-direction:column;align-items:center;gap:6px}
#cek-facade .pose-cube__plan{display:block;width:96px;height:auto}
#cek-facade .pose-cube__forme figcaption{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
#cek-facade .pose-cube__legende{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;font-size:14px;color:var(--muted)}
#cek-facade .pose-cube__legende b{color:var(--ink);font-weight:600;font-size:14.5px}
#cek-facade .pose-cube__legende span{font-size:clamp(17px,1.8vw,21px);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#cek-facade .pose-bref__note{margin:16px auto 0;max-width:74ch;font-size:14.5px;line-height:1.55;color:var(--muted);text-align:center}
#cek-facade .pose-bref__note b{color:var(--ink);font-weight:600}
#cek-facade .pose-bref__qui{margin-top:44px;max-width:720px}
#cek-facade .pose-bref__qui h3{font-size:22px;margin:0 0 8px}
#cek-facade .pose-bref__qui p{font-size:16px;color:var(--muted);margin:0}
#cek-facade .pose-bref__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
#cek-facade .pose-bref__carte{border:1px solid var(--line);border-radius:20px;padding:26px 28px;background:#fff;display:flex;flex-direction:column;gap:8px;min-width:0}
#cek-facade .pose-bref__tarif{align-self:flex-start;font-size:13px;font-weight:600;color:var(--accent);background:var(--mist);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums}
#cek-facade .pose-bref__carte h3{font-size:22px;margin:4px 0 0}
#cek-facade .pose-bref__carte p{font-size:15.5px;color:var(--muted);margin:0}
#cek-facade .pose-bref__repere{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
#cek-facade .pose-bref__cartouche{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-radius:24px;background:var(--mist);padding:28px clamp(20px,3vw,40px)}
#cek-facade .pose-bref__cartouche>div{min-width:0}
#cek-facade .pose-bref__cartouche>div+div{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,56px)}
#cek-facade .pose-bref__cartouche h3{font-size:21px;margin:0 0 8px}
#cek-facade .pose-bref__cartouche p{font-size:15.5px;color:var(--muted);margin:0}
#cek-facade .pose-bref__cartouche .link{text-decoration:none}
#cek-facade .pose-bref__serieux{margin:16px 0 0;font-size:15px;color:var(--muted)}
@media (max-width:899px){
#cek-facade .pose-bref__scene{grid-template-columns:1fr}
#cek-facade .pose-bref__logo{right:14px;bottom:auto;top:12px}
#cek-facade .pose-bref__logo img{width:88px}
#cek-facade .pose-bref__photo{min-height:0;height:220px;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
}
@media (max-width:767px){
#cek-facade .pose-bref{padding-top:60px}
#cek-facade .pose-bref__sol{gap:10px;padding:18px 10px 22px}
#cek-facade .pose-cube__svg{width:auto;max-height:150px}
#cek-facade .pose-cube__plan{width:64px}
#cek-facade .pose-cube__forme figcaption{font-size:10.5px;letter-spacing:.02em}
#cek-facade .pose-cube__legende b{font-size:11.5px}
#cek-facade .pose-cube__legende span{font-size:13px;white-space:normal;line-height:1.25;transition:transform .2s,color .2s}
#cek-facade .pose-cube{outline:none;-webkit-tap-highlight-color:transparent}
#cek-facade .pose-cube:focus .pose-cube__legende span,#cek-facade .pose-cube:active .pose-cube__legende span{transform:scale(1.22);color:var(--accent)}
#cek-facade .pose-bref__duo,#cek-facade .pose-bref__cartouche{grid-template-columns:1fr}
#cek-facade .pose-bref__cartouche>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
#cek-facade .pose-bref__carte{padding:22px}
}
/* Trouver un poseur : « Trois façons de poser vos façades », trois cartes sur une ligne à partir de 900 px,
la solution recommandée (faire soi-même) soulignée par sa bordure. */
#cek-facade .trois-solutions .fin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#cek-facade .trois-solutions .fin-grid>.fin-card:nth-child(3):last-child{grid-column:auto;width:auto;justify-self:stretch}
#cek-facade .trois-solutions .fin-card .link{margin-top:auto;text-decoration:none}
#cek-facade .trois-solutions__reco{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#cek-facade .trois-solutions__liens{margin-top:auto;display:flex;flex-direction:column;gap:6px}
#cek-facade .trois-solutions__liens .link{margin-top:0}
#cek-facade .poseur-kit-grid--seul{display:block;max-width:760px}
#cek-facade .poseur-kit-grid--seul .btn{margin-block:22px 4px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:899px){#cek-facade .trois-solutions .fin-grid{grid-template-columns:1fr}}
/* Mots composés : le trait d'union ne coupe jamais la ligne (perceuse-visseuse, vous-même). */
#cek-facade .insec{white-space:nowrap}
/* Encadré d'expertise sous les repères de prix de la pose. */
#cek-facade .pose-bref__expert{margin:16px 0 0;padding:14px 18px;border:2px dotted #cdc6bc;background:var(--mist);border-radius:12px;font-size:15px;line-height:1.6}
#cek-facade .pose-bref__expert b{display:block;margin-bottom:4px}
/* Plans de cuisine : au survol d'un cube, les meubles se remplissent de vert (CSS seul).
Grande cuisine : alternance chaque demi-seconde entre L avec îlot et U avec îlot. */
#cek-facade .pose-cube__plan .pm,#cek-facade .pose-cube__plan .pm-l{transition:fill .25s ease}
@media (hover:hover){
#cek-facade .pose-cube:hover .pose-cube__plan .pm,#cek-facade .pose-cube:hover .pose-cube__plan .pm-l{fill:#9bd5a6}
#cek-facade .pose-cube:hover .pose-cube__plan .pm-u{animation:pdc-plan-u 1s steps(1,end) infinite}
}
#cek-facade .pose-cube:focus-visible .pose-cube__plan .pm,#cek-facade .pose-cube:focus-visible .pose-cube__plan .pm-l{fill:#9bd5a6}
#cek-facade .pose-cube:focus-visible .pose-cube__plan .pm-u{animation:pdc-plan-u 1s steps(1,end) infinite}
@keyframes pdc-plan-u{0%{fill:#fff}50%{fill:#9bd5a6}}
@media (prefers-reduced-motion:reduce){#cek-facade .pose-cube .pose-cube__plan .pm-u{animation:none!important}}
/* Page poseur : deux colonnes, texte sur 3/4, tutoriel vidéo sur 1/4 (dès 640 px). */
@media (min-width:640px){body.page-id-285242 #cek-facade .poseur-kit-grid--quart{grid-template-columns:minmax(0,3fr) minmax(200px,1fr);max-width:1080px;align-items:start;gap:clamp(24px,4vw,56px)}
body.page-id-285242 #cek-facade .poseur-kit-grid--quart .poseur-kit-copy h2{max-width:24ch}}
body.page-id-285242 #cek-facade .poseur-kit-grid--quart .btn{margin-block:24px 8px}
#cek-facade .poseur-kit-grid--quart .poseur-kit-video figcaption{padding:12px 14px 14px}
#cek-facade .poseur-kit-grid--quart .poseur-kit-video strong{font-size:14.5px;margin-bottom:6px}
#cek-facade .poseur-kit-grid--quart .poseur-kit-video span{font-size:13px}
/* Page poseur : section « Le partenariat pour la pose » plus discrète, phrase clé à la taille du texte. */
body.page-id-285242 #cek-facade .answer{padding-top:56px}
body.page-id-285242 #cek-facade .answer-card{padding:28px 32px;gap:12px}
body.page-id-285242 #cek-facade .answer-card h2{font-size:clamp(20px,2.2vw,26px)}
body.page-id-285242 #cek-facade .answer-card p.answer-yes{font-size:17px;font-weight:600;letter-spacing:0;line-height:1.5;color:var(--ink)}
body.page-id-285242 #cek-facade .answer-card p.answer-yes .answer-brand{color:inherit}
body.page-id-285242 #cek-facade .answer-card p{font-size:15.5px}
/* Bloc d'aide en fin de page : horaires du téléphone (script cekonay-phone-availability) sous la ligne Info tél. */
#cek-facade .help-row .cekonay-phone-hours{margin:0;justify-content:center;color:var(--muted)}
#cek-facade .help-row .cekonay-phone-hours span,#cek-facade .help-row .cekonay-phone-hours strong{font-size:12.5px}
/* Téléphone : au toucher d'un cube, le plan se remplit de vert comme au survol. */
@media (hover:none){
#cek-facade .pose-cube:focus .pose-cube__plan .pm,#cek-facade .pose-cube:focus .pose-cube__plan .pm-l,#cek-facade .pose-cube:active .pose-cube__plan .pm,#cek-facade .pose-cube:active .pose-cube__plan .pm-l{fill:#9bd5a6}
#cek-facade .pose-cube:focus .pose-cube__plan .pm-u,#cek-facade .pose-cube:active .pose-cube__plan .pm-u{animation:pdc-plan-u 1s steps(1,end) infinite}
}
/* Page poseur : « Le partenariat pour la pose » à gauche, « De votre demande au rendez-vous » à droite. */
body.page-id-285242 #cek-facade .answer-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
body.page-id-285242 #cek-facade .answer-duo>*{min-width:0}
@media (min-width:900px){body.page-id-285242 #cek-facade .answer-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
body.page-id-285242 #cek-facade .answer-etapes{padding-left:48px;border-left:1px solid var(--line)}}
body.page-id-285242 #cek-facade .answer-copy{display:flex;flex-direction:column;gap:12px}
body.page-id-285242 #cek-facade .answer-etapes{display:flex;flex-direction:column;gap:14px}
body.page-id-285242 #cek-facade .answer-etapes h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15;margin:0 0 6px}
body.page-id-285242 #cek-facade .answer-etapes .coupe-liste{gap:16px}
body.page-id-285242 #cek-facade .answer-etapes .coupe-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:600;font-size:15px}
body.page-id-285242 #cek-facade .answer-etapes .coupe-liste b{font-size:16px}
body.page-id-285242 #cek-facade .answer-etapes .coupe-liste li>span>span{display:block;font-size:14.5px}
body.page-id-285242 #cek-facade .answer-etapes .btn{align-self:flex-start;margin-top:10px}
body.page-id-285242 #cek-facade .answer-etapes .insec{display:inline;font-size:inherit}
/* Étapes NeedHelp : petite photo du poseur en haut à droite de la colonne. */
body.page-id-285242 #cek-facade .answer-etapes__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
body.page-id-285242 #cek-facade .answer-etapes__head>div{min-width:0}
body.page-id-285242 #cek-facade .answer-etapes__photo{flex:0 0 auto;width:clamp(84px,9vw,120px)}
body.page-id-285242 #cek-facade .answer-etapes__photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px}
/* Service perçage et pose, « Les repères » : schéma des charnières en petit, puis le tutoriel vidéo dessous. */
body.page-id-285099 #cek-facade #reperes .coupe-duo{align-items:start}
body.page-id-285099 #cek-facade .coupe-media{display:flex;flex-direction:column;gap:22px;min-width:0}
body.page-id-285099 #cek-facade .coupe-img--petite{max-width:240px;border-radius:14px}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video strong,body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video span{display:block}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video{margin:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 16px 42px rgba(20,20,24,.09)}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#151515}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video figcaption{padding:14px 18px 17px}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video strong{font-size:16px;line-height:1.35;margin-bottom:4px}
body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video span{font-size:14px;line-height:1.5;color:var(--muted)}
/* « Les repères » : schéma des charnières et photo du kit côte à côte ; la photo du kit mène au produit. */
body.page-id-285099 #cek-facade .coupe-vignettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:480px}
body.page-id-285099 #cek-facade .coupe-vignettes .coupe-img--petite{max-width:none;background:#fff;display:flex;flex-direction:column;justify-content:center}
body.page-id-285099 #cek-facade .coupe-img--produit{text-decoration:none;color:var(--blue-link);transition:box-shadow .2s}
body.page-id-285099 #cek-facade .coupe-img--produit:hover{box-shadow:0 10px 26px rgba(20,20,24,.12)}
body.page-id-285099 #cek-facade .coupe-img--produit span{display:block;padding:8px 12px 10px;font-size:13.5px;font-weight:600}
/* « Les repères » : vignettes et vidéo forment un seul bloc, même largeur, mêmes coins, même ombre. */
body.page-id-285099 #cek-facade .coupe-media{gap:14px;width:100%;max-width:640px}
body.page-id-285099 #cek-facade .coupe-vignettes{max-width:none;width:100%}
body.page-id-285099 #cek-facade .coupe-vignettes .coupe-img--petite,body.page-id-285099 #cek-facade .coupe-media .poseur-kit-video{border-radius:16px;box-shadow:0 8px 24px rgba(20,20,24,.07)}
body.page-id-285099 #cek-facade .coupe-vignettes .coupe-img--petite img{width:100%;height:auto;aspect-ratio:1/0.82;object-fit:contain;padding:10px;box-sizing:border-box}
body.page-id-285099 #cek-facade .coupe-img--produit:hover{box-shadow:0 12px 30px rgba(20,20,24,.13)}
@media (max-width:1024px){body.page-id-285099 #cek-facade .coupe-media{margin-inline:auto}}
body.page-id-285099 #cek-facade .coupe-liste .coupe-liens{display:flex !important;flex-wrap:wrap;gap:0 18px;margin:0 0 -10px}
body.page-id-285099 #cek-facade .coupe-liste .coupe-liens .link{padding:0;font-size:15px}
/* « Ce que vous économisez » : paragraphes espacés, largeur de lecture confortable. */
body.page-id-285099 #cek-facade .budget p{max-width:68ch;margin:0 0 14px;line-height:1.65}
/* FAQ « Je préfère en parler à quelqu'un » : horaires du téléphone (script cekonay-phone-availability) sous le numéro. */
body.page-id-285099 #cek-facade .faq .cekonay-phone-hours{display:flex;margin-top:6px;color:var(--muted);font-size:13.5px}
/* Service perçage et pose : photo du poseur cadrée sur le visage et le tournevis ; héros recentré sur le poseur en téléphone. */
body.page-id-285099 #cek-facade .env-b>.envie-visuel img{object-position:center 30%}
@media (max-width:700px){body.page-id-285099 #cek-facade .hero .hero-bg{object-position:70% center}}
/* Service perçage et pose : « Faites-le vous-même », trois cartes (matériel, temps, accompagnement). */
body.page-id-285099 #cek-facade .diy-kit .fin-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){body.page-id-285099 #cek-facade .diy-kit .fin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.page-id-285099 #cek-facade .diy-kit .fin-grid>.fin-card:nth-child(3):last-child{grid-column:auto;width:auto;justify-self:stretch}
body.page-id-285099 #cek-facade .diy-kit .fin-card .link{margin-top:auto}
/* Aide à la pose (285322) : mode d'emploi NeedHelp en 4 étapes et outil de rédaction. */
body.page-id-285322 #cek-facade .aide-hero{min-height:auto;background:var(--night);padding-block:clamp(56px,8vw,96px)}
body.page-id-285322 #cek-facade .aide-etapes,body.page-id-285322 #cek-facade .aide-outil,body.page-id-285322 #cek-facade .aide-garanties{padding-block:clamp(48px,7vw,84px)}
body.page-id-285322 #cek-facade .aide-outil{background:var(--mist)}
body.page-id-285322 #cek-facade .aide-liste{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
body.page-id-285322 #cek-facade .aide-etape{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
@media (min-width:900px){body.page-id-285322 #cek-facade .aide-etape{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;padding:28px 32px}}
body.page-id-285322 #cek-facade .aide-etape__texte{display:flex;flex-direction:column;gap:10px;min-width:0}
body.page-id-285322 #cek-facade .aide-etape__num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:16px}
body.page-id-285322 #cek-facade .aide-etape h3{font-size:clamp(19px,2vw,23px);margin:0}
body.page-id-285322 #cek-facade .aide-etape p{margin:0;font-size:15.5px;line-height:1.6;color:#37343A}
body.page-id-285322 #cek-facade .aide-astuce{padding:10px 14px;border:1.5px dotted #cdc6bc;border-radius:12px;background:var(--mist);font-size:14.5px}
body.page-id-285322 #cek-facade .aide-etape__capture{display:block;border-radius:14px;overflow:hidden;background:#f4f4f5;box-shadow:0 8px 24px rgba(20,20,24,.07);transition:box-shadow .2s}
body.page-id-285322 #cek-facade .aide-etape__capture:hover{box-shadow:0 12px 30px rgba(20,20,24,.13)}
body.page-id-285322 #cek-facade .aide-etape__capture img{display:block;width:100%;height:auto}
body.page-id-285322 #cek-facade .aide-suite{margin-top:22px;font-size:15.5px;color:var(--muted)}
body.page-id-285322 #cek-facade .aide-outil__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:26px}
@media (min-width:900px){body.page-id-285322 #cek-facade .aide-outil__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}}
body.page-id-285322 #cek-facade .aide-form{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
body.page-id-285322 #cek-facade .aide-form fieldset{border:0;margin:0;padding:0;min-width:0}
body.page-id-285322 #cek-facade .aide-form legend{font-weight:700;font-size:15px;margin-bottom:10px;padding:0}
body.page-id-285322 #cek-facade .aide-nombres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){body.page-id-285322 #cek-facade .aide-nombres{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.page-id-285322 #cek-facade .aide-nombres label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#37343A}
body.page-id-285322 #cek-facade .aide-nombres input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;font-weight:600;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--mist)}
body.page-id-285322 #cek-facade .aide-choix,body.page-id-285322 #cek-facade .aide-cases{display:flex;flex-wrap:wrap;gap:8px}
body.page-id-285322 #cek-facade .aide-choix label,body.page-id-285322 #cek-facade .aide-cases label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;cursor:pointer;background:#fff}
body.page-id-285322 #cek-facade .aide-choix label:has(input:checked),body.page-id-285322 #cek-facade .aide-cases label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body.page-id-285322 #cek-facade .aide-choix input,body.page-id-285322 #cek-facade .aide-cases input{accent-color:var(--accent);margin:0}
body.page-id-285322 #cek-facade .aide-resultat{display:flex;flex-direction:column;gap:12px;min-width:0}
body.page-id-285322 #cek-facade .aide-resultat label{font-weight:700;font-size:15px}
body.page-id-285322 #cek-facade .aide-resultat textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;line-height:1.55;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#1d1d1f;resize:vertical;min-height:200px}
body.page-id-285322 #cek-facade .aide-resultat__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body.page-id-285322 #cek-facade .aide-resultat .btn{align-self:flex-start}
body.page-id-285322 #cek-facade .aide-copie{font-size:14px;color:var(--accent);font-weight:600}
body.page-id-285322 #cek-facade .aide-garanties__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:24px 0 14px}
@media (min-width:768px){body.page-id-285322 #cek-facade .aide-garanties__grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.page-id-285322 #cek-facade .aide-garanties__grille>div{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:#fff}
body.page-id-285322 #cek-facade .aide-garanties__grille h3{font-size:18px;margin:0 0 6px}
body.page-id-285322 #cek-facade .aide-garanties__grille p{margin:0;font-size:15px;color:#37343A}
body.page-id-285322 #cek-facade .help-row .cekonay-phone-hours{margin:0;justify-content:center;color:var(--muted)}
body.page-id-285322 #cek-facade .aide-resultat .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
body.page-id-285322 #cek-facade .aide-hero .hero-proof{max-width:none}
body.page-id-285322 #cek-facade .aide-commande{margin-top:26px;background:#fff;border:1px solid var(--accent);border-radius:20px;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--accent)}
body.page-id-285322 #cek-facade .aide-commande__etat{display:none;flex-direction:column;gap:14px}
body.page-id-285322 #cek-facade .aide-commande[data-etat="connecte"] [data-mode="connecte"],body.page-id-285322 #cek-facade .aide-commande[data-etat="sans-commande"] [data-mode="sans-commande"],body.page-id-285322 #cek-facade .aide-commande[data-etat="deconnecte"] [data-mode="deconnecte"]{display:flex}
body.page-id-285322 #cek-facade .aide-commande__etat>div:first-child{display:flex;flex-direction:column;gap:4px}
body.page-id-285322 #cek-facade .aide-commande__etat b{font-size:17px}
body.page-id-285322 #cek-facade .aide-commande__etat>div:first-child span{font-size:15px;color:#37343A}
body.page-id-285322 #cek-facade .aide-commande__choix{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;max-width:420px}
body.page-id-285322 #cek-facade .aide-commande__choix select{font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--mist);max-width:100%}
body.page-id-285322 #cek-facade .aide-commande__actions{display:flex;flex-wrap:wrap;gap:10px}
body.page-id-285322 #cek-facade .aide-commande .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
body.page-id-285322 #cek-facade .aide-commande__note{margin:0;font-size:13.5px;color:var(--muted)}
body.page-id-285322 #cek-facade .aide-form input,body.page-id-285322 #cek-facade .aide-commande select,body.page-id-285322 #cek-facade .aide-resultat textarea{color:var(--ink);color-scheme:light}
@media (min-width:600px){body.page-id-285322 #cek-facade .aide-nombres{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:600px){body.page-id-285322 #cek-facade .aide-nombres{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){body.page-id-285322 #cek-facade .aide-nombres{grid-template-columns:repeat(6,minmax(0,1fr))}}
body.page-id-285322 #cek-facade .aide-note{margin:10px 0 0;padding:10px 14px;border:1.5px dotted #cdc6bc;border-radius:12px;background:var(--mist);font-size:14px;color:#37343A}
body.page-id-285322 #cek-facade .aide-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font:italic 700 11px/1 Georgia,serif;margin-left:2px}
body.page-id-285322 #cek-facade .aide-acces{margin-top:22px;border:1.5px dotted #cdc6bc;border-radius:16px;background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
body.page-id-285322 #cek-facade .aide-acces b{font-size:16px}
body.page-id-285322 #cek-facade .aide-acces p{margin:0;font-size:15px;color:#37343A}
body.page-id-285322 #cek-facade .aide-acces__liens{display:flex;flex-wrap:wrap;gap:4px 20px}
body.page-id-285322 #cek-facade .aide-verrou::before{content:"";display:inline-block;width:11px;height:12px;margin-right:8px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M2 5V3.5a3.5 3.5 0 0 1 7 0V5h1v7H1V5zm1.5 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M2 5V3.5a3.5 3.5 0 0 1 7 0V5h1v7H1V5zm1.5 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Aide à la pose : « Assurance incluse… » ; points sur ordinateur, une ligne plus petite avec virgules sur tablette et téléphone. */
body.page-id-285322 #cek-facade .aide-preuves span::after{content:"."}
@media (max-width:899px){body.page-id-285322 #cek-facade .aide-preuves{display:block;font-size:13px;line-height:1.5}
body.page-id-285322 #cek-facade .aide-preuves span:not(:last-child)::after{content:", "}
body.page-id-285322 #cek-facade .aide-preuves span:not(:first-child){text-transform:lowercase}}
body.page-id-285322 #cek-facade #preparer{scroll-margin-top:110px}
body.page-id-285322 #cek-facade .aide-h1-accent{color:var(--blue)}
/* Encadré placé juste sous une grille d'étapes : il ne colle plus aux étapes (14/10/2026). */
#cek-facade .etp-grid + .answer-card{margin-top:44px}
@media (max-width:760px){#cek-facade .etp-grid + .answer-card{margin-top:30px}}
/* ===== Modèles de portes de cuisine (page 317700) : photos des cartes, 14/10/2026 ===== */
body.page-id-317700 #cek-facade .cek-modele-photo{display:block;margin:-10px -12px 6px;border-radius:14px;overflow:hidden;aspect-ratio:3/1;background:var(--mist)}
body.page-id-317700 #cek-facade .cek-modele-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
body.page-id-317700 #cek-facade a.fin-card:hover .cek-modele-photo img{transform:scale(1.03)}
body.page-id-317700 #cek-facade .porteco-hero .hero-bg{object-position:62% 50%}
@media (max-width:760px){body.page-id-317700 #cek-facade .cek-modele-photo{margin:-8px -8px 4px}}
@media (prefers-reduced-motion:reduce){body.page-id-317700 #cek-facade a.fin-card:hover .cek-modele-photo img{transform:none}}
body.page-id-317700 #cek-facade .cek-modele-photo picture{display:block;width:100%;height:100%}
body.page-id-317700 #cek-facade .hero-bg-pic{display:contents}
/* Tendances 2026 (page 305966) : galerie « inspirations » contenue sur ordinateur.
Les photos font 1024 px ; étirées sur toute la largeur elles devenaient floues.
3 colonnes carrées dans 1080 px, angles arrondis. Mobile inchangé. */
@media (min-width:721px){
body.page-id-305966 #cek-facade .galerie{padding:8px 24px 72px}
body.page-id-305966 #cek-facade .gal-grille{max-width:1080px;margin:0 auto;grid-template-columns:repeat(3,1fr);gap:16px}
body.page-id-305966 #cek-facade .gal-item,
body.page-id-305966 #cek-facade .gal-item:first-child,
body.page-id-305966 #cek-facade .gal-item:last-child:nth-child(even){grid-column:span 1;aspect-ratio:1;border-radius:16px}
body.page-id-305966 #cek-facade .gal-item figcaption{padding:18px 18px 14px;font-size:14px}
body.page-id-305966 #cek-facade .gal-item figcaption b{font-size:16px}
}