/* 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 .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}
/* 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-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}
/* 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{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)}
/* finitions */
#cek-facade .fin{padding:88px 0 0}
#cek-facade .fin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#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;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)}
/* 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)}
@media(min-width:1100px){
.page-id-606 #cek-facade .lim-head{max-width:1160px}
.page-id-606 #cek-facade .lim-head h2{white-space:nowrap}
}
#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 .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}
}
@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 .marques-in{padding:38px 24px;border-radius:22px}
 #cek-facade .answer-card{padding:30px 24px}
 #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}}
@media (prefers-reduced-motion:reduce){#cek-facade *{transition:none!important;animation:none!important}}
#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)}
#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}
}
@media (max-width:560px){#cek-facade .etp-grid{grid-template-columns:1fr}}

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

/* 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,92vw);margin:0 auto}
#cek-facade .e404{padding:clamp(48px,9vw,110px) 0 clamp(28px,5vw,52px)}
#cek-facade .e404-code{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin:0 0 14px}
#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-recherche label{display:block;font-size:14px;opacity:.6;margin-bottom:8px}
#cek-facade .e404-champ{display:flex;flex-wrap:wrap;gap:10px;max-width:620px}
#cek-facade .e404-champ input{flex:1 1 240px;min-width:0;padding:14px 16px;font-size:16px;
  border:1px solid var(--cek-bordure,rgba(128,128,128,.35));border-radius:12px;
  background:var(--cek-surface,#f5f5f7);color:inherit}
#cek-facade .e404-champ button{flex:0 0 auto;padding:14px 22px;font-size:16px;font-weight:600;
  border:0;border-radius:12px;cursor:pointer;background:var(--cek-accent,#1d1d1f);color:var(--cek-sur-accent,#fff)}

#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}

@media(min-width:700px){
  #cek-facade .e404-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  #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}
}

/* ======================================================================
   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 .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}
}

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


/* =====================================================================
   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}
#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}