.kn {
    --primary:#3A5932; --primary-dark:#101B0C;
    --secondary:#8A5A22; --secondary-dark:#402610;
    --copper:#A67437;
    --ink:#0E170A;
    --bg-main:#FFFFFF; --bg-sand:#EFEFEE; --white:#fff;
    --text-dark:#182614; --text-light:#474C44; --border:#D7D7D5;
    --font-title:'Playfair Display',serif; --font-body:'Inter',sans-serif;
    font-family:var(--font-body); color:var(--text-dark); line-height:1.62;
}
.kn *,.kn *::before,.kn *::after { box-sizing:border-box; }
.kn img { max-width:100%; height:auto; display:block; }
.kn-wrap { max-width:1220px; margin:0 auto; padding:0 24px; }

.kn-js .kn-rv { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.kn-js .kn-rv.in { opacity:1; transform:none; }

.kn-eyebrow { display:flex; align-items:center; gap:12px; font-size:.72rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--secondary); margin-bottom:16px; }
.kn-eyebrow::before { content:''; width:30px; height:1px; background:var(--secondary); flex-shrink:0; }
.kn-eyebrow.c { justify-content:center; }
.kn-eyebrow.c::before { display:none; }
.kn .kn-title { font-family:var(--font-title); font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.18;
    margin:0 0 15px; font-weight:600; color:var(--text-dark); }
.kn-intro { font-size:1.06rem; color:var(--text-light); margin:0; max-width:700px; }
.kn-head { margin-bottom:46px; }
.kn-head.c { text-align:center; }
.kn-head.c .kn-intro { margin:0 auto; }

.kn-btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 32px;
    border-radius:2px; font-weight:500; font-size:1rem; text-decoration:none; cursor:pointer;
    transition:all .3s ease; border:1px solid transparent; font-family:var(--font-body); text-align:center; }
.kn-btn-solid { background:var(--secondary); color:var(--white); border-color:var(--secondary); }
.kn-btn-solid:hover { background:var(--secondary-dark); border-color:var(--secondary-dark); color:var(--white)!important; transform:translateY(-2px); }
.kn-btn-green { background:var(--primary); color:var(--white); border-color:var(--primary); }
.kn-btn-green:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:var(--white)!important; transform:translateY(-2px); }
.kn-btn-ghost { background:transparent; color:var(--text-dark); border-color:#D7D7D5; }
.kn-btn-ghost:hover { background:var(--text-dark); color:var(--white)!important; border-color:var(--text-dark); transform:translateY(-2px); }
.kn-btn-light { background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.kn-btn-light:hover { background:var(--white); color:var(--ink)!important; transform:translateY(-2px); }

/* ============ 1. HERO PLEINE LARGEUR ============ */
.kn-hero { position:relative; min-height:640px; display:flex; align-items:flex-end;
    background:linear-gradient(180deg, rgba(20,20,18,.30) 0%, rgba(20,20,18,.82) 100%),
        url('https://koadbooth.fr/wp-content/uploads/2026/04/DSC06643-scaled-1.webp') center/cover no-repeat;
    color:var(--white); padding:120px 0 60px; }
.kn-hero-in { max-width:1220px; margin:0 auto; padding:0 24px; width:100%; }
.kn-hero .kn-eyebrow { color:var(--copper); }
.kn-hero .kn-eyebrow::before { background:var(--copper); }
.kn .kn-hero h1 { font-family:var(--font-title); font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.1;
    font-weight:600; margin:0 0 18px; max-width:900px; color:#ffffff !important; letter-spacing:-.01em; }
.kn .kn-hero h1 em { font-style:italic; color:var(--copper); }
.kn-hero-sub { font-size:1.12rem; color:rgba(255,255,255,.88); font-weight:300; max-width:660px; margin:0 0 30px; }
.kn-hero-acts { display:flex; gap:13px; flex-wrap:wrap; }
.kn-hero-meta { display:flex; gap:0; margin-top:44px; border-top:1px solid rgba(255,255,255,.24); }
.kn-hero-meta div { padding:18px 30px 0 0; margin-right:30px; border-right:1px solid rgba(255,255,255,.24); }
.kn-hero-meta div:last-child { border-right:none; }
.kn-hero-meta b { display:block; font-family:var(--font-title); font-size:1.5rem; font-weight:500; color:#fff; line-height:1.1; }
.kn-hero-meta span { font-size:.82rem; color:rgba(255,255,255,.72); }

/* ============ 2. COMPARATEUR MORPHING ============ */
.kn-comp { background:var(--bg-main); padding:88px 0; }
.kn-switch { display:inline-flex; background:var(--white); border:1px solid var(--border); padding:5px; margin:0 auto 44px; }
.kn-switch-wrap { text-align:center; }
.kn-switch button { border:none; background:transparent; cursor:pointer; padding:12px 30px;
    font-family:var(--font-body); font-size:.95rem; font-weight:500; color:var(--text-light); transition:all .3s ease; }
.kn-switch button:hover { color:var(--text-dark); }
.kn-switch button.on { background:var(--primary); color:var(--white); }

.kn-panes { display:grid; gap:30px; }
.kn-panes.solo { grid-template-columns:1fr; max-width:1000px; margin:0 auto; }
.kn-panes.duo  { grid-template-columns:1fr 1fr; }

.kn-pane { border:1px solid var(--border); background:var(--white); display:none; }
.kn-pane.show { display:block; }
.kn-panes.solo .kn-pane.show { display:grid; grid-template-columns:1fr 1fr; }
.kn-pane-media { position:relative; overflow:hidden; }
.kn-pane-media img { width:100%; height:100%; min-height:330px; object-fit:cover; cursor:zoom-in;
    transition:transform .6s cubic-bezier(.25,1,.5,1); }
.kn-pane-media:hover img { transform:scale(1.04); }
.kn-pane-badge { position:absolute; top:0; left:0; padding:7px 16px; font-size:.68rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.kn-pane-badge.o { background:var(--secondary); }
.kn-pane-badge.s { background:var(--primary); }
.kn-pane-body { padding:34px 32px; }
.kn .kn-pane-body h2, .kn .kn-pane-body h3 { font-family:var(--font-title); font-size:2rem; font-weight:500;
    margin:0 0 8px; color:var(--text-dark); }
.kn-pane-line { font-size:.9rem; color:var(--secondary); font-weight:500; margin:0 0 16px; }
.kn-pane-body > p { font-size:.97rem; color:var(--text-light); margin:0 0 22px; }
.kn-spec { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--border); margin-bottom:24px; }
.kn-spec div { padding:14px 0; border-bottom:1px solid var(--border); }
.kn-spec div:nth-child(odd) { padding-right:16px; border-right:1px solid var(--border); }
.kn-spec div:nth-child(even) { padding-left:16px; }
.kn-spec span { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:#474C44; margin-bottom:3px; }
.kn-spec strong { font-size:.96rem; color:var(--text-dark); font-weight:500; }
.kn-pane-price { font-family:var(--font-title); font-size:1.35rem; color:var(--primary); margin-bottom:18px; }
.kn-pane-price small { font-family:var(--font-body); font-size:.82rem; color:var(--text-light); }
.kn-pane-acts { display:flex; gap:11px; flex-wrap:wrap; }
.kn-pane-acts .kn-btn { flex:1; min-width:180px; padding:13px 20px; font-size:.93rem; }

/* ============ 3. ANATOMIE / MATERIAUX ============ */
.kn-mat { background:var(--white); padding:88px 0; }
.kn-mat-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.kn-mat-media img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.kn-mat-list { list-style:none; padding:0; margin:26px 0 0; }
.kn-mat-list li { display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--border); }
.kn-mat-num { font-family:var(--font-title); font-size:.95rem; color:var(--secondary); width:24px; flex-shrink:0; padding-top:2px; }
.kn .kn-mat-list h3 { font-family:var(--font-title); font-size:1.14rem; font-weight:500; margin:0 0 5px; color:var(--text-dark); }
.kn-mat-list p { margin:0; font-size:.92rem; color:var(--text-light); }

/* ============ 4. TECHNOLOGIE ============ */
.kn-tech { background:var(--ink); color:var(--white); padding:88px 0; }
.kn .kn-tech .kn-title { color:#ffffff !important; }
.kn-tech .kn-intro { color:rgba(255,255,255,.76); }
.kn-tech .kn-eyebrow { color:var(--copper); }
.kn-tech .kn-eyebrow::before { background:var(--copper); }
.kn-tech-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start; }
.kn-tech-nav { border-top:1px solid rgba(255,255,255,.18); }
.kn-tech-btn { width:100%; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.18);
    display:flex; align-items:baseline; gap:18px; padding:22px 4px; cursor:pointer; text-align:left;
    font-family:var(--font-body); transition:all .3s ease; }
.kn-tech-btn small { font-size:.8rem; color:rgba(255,255,255,.42); transition:color .3s ease; }
.kn .kn-tech-btn h3 { font-family:var(--font-title); font-size:1.35rem; font-weight:500; margin:0;
    color:rgba(255,255,255,.5) !important; transition:all .3s ease; }
.kn-tech-btn:hover h3 { color:rgba(255,255,255,.85) !important; }
.kn .kn-tech-btn.on h3 { color:#ffffff !important; }
.kn-tech-btn.on small { color:var(--copper); }
.kn-tech-btn.on { padding-left:14px; }
.kn-tech-pane { display:none; }
.kn-tech-pane.on { display:block; animation:knFade .5s ease; }
@keyframes knFade { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.kn-tech-pane p { font-size:1.04rem; line-height:1.8; font-weight:300; color:rgba(255,255,255,.85); margin:0 0 18px; }
.kn-tech-pane ul { list-style:none; padding:0; margin:22px 0 0; }
.kn-tech-pane li { padding:11px 0 11px 24px; position:relative; font-size:.93rem;
    color:rgba(255,255,255,.78); border-top:1px solid rgba(255,255,255,.14); }
.kn-tech-pane li::before { content:''; position:absolute; left:0; top:20px; width:7px; height:7px;
    border-left:1px solid var(--copper); border-bottom:1px solid var(--copper); transform:rotate(-45deg); }

/* ============ 5. FRISE FABRICATION ============ */
.kn-made { background:var(--bg-sand); padding:88px 0; }
.kn-made-track { display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.kn-made-step { padding:0 22px 0 0; position:relative; }
.kn-made-step::before { content:''; position:absolute; top:11px; left:0; right:0; height:1px; background:var(--border); }
.kn-made-step:last-child::before { right:22px; }
.kn-made-dot { width:22px; height:22px; border-radius:50%; background:var(--bg-sand); border:1px solid var(--secondary);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:2; margin-bottom:20px; }
.kn-made-dot::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--secondary); }
.kn .kn-made-step h3 { font-family:var(--font-title); font-size:1.1rem; font-weight:500; margin:0 0 7px; color:var(--text-dark); }
.kn-made-step p { font-size:.89rem; color:var(--text-light); margin:0; }

/* ============ 6. SELECTEUR EVENEMENT ============ */
.kn-choose { background:var(--white); padding:88px 0; }
.kn-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:38px; }
.kn-chip { border:1px solid var(--border); background:var(--white); cursor:pointer; padding:11px 22px;
    font-family:var(--font-body); font-size:.93rem; color:var(--text-light); transition:all .28s ease; }
.kn-chip:hover { border-color:var(--primary); color:var(--primary); }
.kn-chip.on { background:var(--primary); border-color:var(--primary); color:var(--white); }
.kn-reco { max-width:820px; margin:0 auto; border:1px solid var(--border); background:var(--bg-main); padding:36px 34px; }
.kn-reco-top { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    flex-wrap:wrap; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.kn .kn-reco-top h3 { font-family:var(--font-title); font-size:1.55rem; font-weight:500; margin:0; color:var(--primary); }
.kn-reco-tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--secondary); }
.kn-reco p { font-size:1rem; color:var(--text-light); margin:0 0 22px; }
.kn-reco-acts { display:flex; gap:11px; flex-wrap:wrap; }

/* ============ 7. PERSONNALISATION ============ */
.kn-perso { background:var(--bg-main); padding:88px 0; }
.kn-perso-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.kn-perso-tabs { display:flex; gap:9px; margin-bottom:26px; flex-wrap:wrap; }
.kn-perso-tabs button { border:1px solid var(--border); background:var(--white); cursor:pointer;
    padding:10px 20px; font-family:var(--font-body); font-size:.9rem; color:var(--text-light); transition:all .28s ease; }
.kn-perso-tabs button:hover { border-color:var(--secondary); color:var(--secondary); }
.kn-perso-tabs button.on { background:var(--secondary); border-color:var(--secondary); color:var(--white); }
.kn-perso-pane { display:none; }
.kn-perso-pane.on { display:block; animation:knFade .45s ease; }
.kn .kn-perso-pane h3 { font-family:var(--font-title); font-size:1.35rem; font-weight:500; margin:0 0 10px; color:var(--text-dark); }
.kn-perso-pane p { font-size:.98rem; color:var(--text-light); margin:0 0 14px; }
.kn-perso-note { font-size:.84rem; color:var(--secondary); font-weight:500; }

/* Apercu de tirage rendu en CSS - aucune image factice */
.kn-preview { background:var(--bg-sand); border:1px solid var(--border); padding:36px;
    display:flex; align-items:center; justify-content:center; min-height:400px; }
.kn-print { background:#fff; box-shadow:0 14px 34px rgba(0,0,0,.13); padding:9px 9px 0;
    transition:all .5s cubic-bezier(.25,1,.5,1); display:flex; flex-direction:column;
    /* flex-shrink:0 est indispensable : sans lui, le conteneur flex ecrase
       l'apercu sur petit ecran et les deux formats deviennent identiques,
       ce qui vide l'onglet de tout son interet. */
    flex-shrink:0; max-width:100%; }
.kn-print.strip { width:130px; }
.kn-print.card  { width:290px; }
.kn-print-shot { background:linear-gradient(140deg,#E6E6E4,#84847F); position:relative; overflow:hidden; }
.kn-print.strip .kn-print-shot { aspect-ratio:1/1; margin-bottom:7px; }
.kn-print.card  .kn-print-shot { aspect-ratio:4/3; margin-bottom:9px; }
.kn-print-shot::after { content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 32% 42%, rgba(255,255,255,.5), transparent 55%); }
.kn-print-foot { padding:10px 4px 14px; text-align:center; }
.kn-print-foot b { display:block; font-family:'Playfair Display',serif; color:#3A5932; line-height:1.2; }
.kn-print.strip .kn-print-foot b { font-size:.72rem; }
.kn-print.card  .kn-print-foot b { font-size:1.05rem; }
.kn-print-foot span { display:block; color:#474C44; margin-top:3px; }
.kn-print.strip .kn-print-foot span { font-size:.52rem; }
.kn-print.card  .kn-print-foot span { font-size:.72rem; }
.kn-preview-lbl { position:absolute; }

/* ============ 8. COMPARATIF MARCHE ============ */
.kn-vs { background:var(--white); padding:88px 0; }
.kn-vs-table { width:100%; border-collapse:collapse; font-size:.95rem; border:1px solid var(--border); }
.kn-vs-table th, .kn-vs-table td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); }
.kn-vs-table thead th { background:var(--bg-sand); font-weight:600; color:var(--text-dark); font-size:.86rem;
    text-transform:uppercase; letter-spacing:.08em; }
/* IMPORTANT : couleur forcee. Un theme WordPress qui cible "th" directement
   ferait repasser cet en-tete en sombre, donc illisible sur le fond vert. */
.kn .kn-vs-table thead th.hi { background:var(--primary); color:#ffffff !important; }
.kn-vs-table td { color:var(--text-light); }
.kn-vs-table td.hi { background:#F5F5F4; color:var(--text-dark); font-weight:500; }
.kn-vs-table tbody th { font-weight:500; color:var(--text-dark); background:var(--bg-main); }

/* ============ 9. EDITORIAL SEO ============ */
.kn-seo { background:var(--bg-sand); padding:88px 0; }
.kn-seo-in { max-width:820px; margin:0 auto; }
.kn .kn-seo h3 { font-family:var(--font-title); font-size:1.28rem; font-weight:500; color:var(--primary); margin:32px 0 12px; }
.kn-seo p { font-size:1rem; color:var(--text-light); margin:0 0 15px; }
.kn-seo a { color:var(--secondary); font-weight:500; }

/* ============ 10. FAQ ============ */
.kn-faq { background:var(--white); padding:88px 0; }
.kn-faq-in { max-width:820px; margin:0 auto; }
.kn-acc-item { border-bottom:1px solid var(--border); }
.kn-acc-item:first-child { border-top:1px solid var(--border); }
.kn-acc-btn { width:100%; background:none; border:none; padding:23px 0; display:flex;
    justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-title);
    font-size:1.1rem; font-weight:500; color:var(--text-dark); text-align:left; cursor:pointer; transition:color .3s ease; }
.kn-acc-btn:hover { color:var(--secondary); }
.kn-acc-ico { position:relative; width:16px; height:16px; flex-shrink:0; }
.kn-acc-ico::before,.kn-acc-ico::after { content:''; position:absolute; background:var(--secondary); transition:all .3s ease; }
.kn-acc-ico::before { left:7px; top:0; width:2px; height:16px; }
.kn-acc-ico::after { left:0; top:7px; width:16px; height:2px; }
.kn-acc-item.open .kn-acc-ico::before { transform:rotate(90deg); }
.kn-acc-panel { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.kn-acc-panel p { padding:0 0 23px; margin:0; color:var(--text-light); font-size:.96rem; }
.kn-acc-panel a { color:var(--secondary); font-weight:500; }

/* ============ 11. MAILLAGE INTERNE ============ */
.kn-paths { background:var(--bg-main); padding:88px 0; }
.kn-paths-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); background:var(--white); }
.kn-path { padding:40px 32px; border-right:1px solid var(--border); display:flex; flex-direction:column;
    transition:background .3s ease; }
.kn-path:last-child { border-right:none; }
.kn-path:hover { background:var(--bg-sand); }
.kn-path-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; font-weight:600; color:var(--secondary); margin-bottom:12px; }
.kn .kn-path h3 { font-family:var(--font-title); font-size:1.45rem; font-weight:500; margin:0 0 10px; color:var(--text-dark); }
.kn-path p { font-size:.94rem; color:var(--text-light); margin:0 0 24px; flex-grow:1; }
.kn-path .kn-btn { width:100%; }

/* ============ 12. CTA FINAL ============ */
.kn-final { background:var(--primary); color:var(--white); padding:92px 0; text-align:center; }
.kn-final-in { max-width:660px; margin:0 auto; }
.kn .kn-final h2 { font-family:var(--font-title); font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:500;
    margin:0 0 16px; color:#ffffff !important; }
.kn-final p { font-size:1.04rem; color:rgba(255,255,255,.85); font-weight:300; margin:0 auto 30px; }
.kn-final-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.kn-final .kn-btn-solid { background:#fff; color:var(--primary); border-color:#fff; }
.kn-final .kn-btn-solid:hover { background:var(--bg-sand); color:var(--primary)!important; }

/* ============ LIGHTBOX ============ */
.kn-lb { position:fixed; inset:0; z-index:100000; display:none; background:rgba(20,20,18,.93);
    align-items:center; justify-content:center; padding:40px; cursor:zoom-out; }
.kn-lb.open { display:flex; }
.kn-lb img { max-width:92vw; max-height:88vh; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.kn-lb-close { position:absolute; top:24px; right:28px; width:44px; height:44px; border:none;
    background:rgba(255,255,255,.12); color:#fff; font-size:26px; border-radius:50%; cursor:pointer; }
.kn-lb-close:hover { background:rgba(255,255,255,.28); }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
    .kn-panes.duo { grid-template-columns:1fr; }
    .kn-panes.solo .kn-pane.show { grid-template-columns:1fr; }
    .kn-mat-grid,.kn-tech-grid,.kn-perso-grid { grid-template-columns:1fr; gap:40px; }
    .kn-made-track { grid-template-columns:1fr 1fr; gap:26px 20px; }
    .kn-made-step::before { display:none; }
    .kn-paths-grid { grid-template-columns:1fr; }
    .kn-path { border-right:none; border-bottom:1px solid var(--border); }
    .kn-path:last-child { border-bottom:none; }
}
@media (max-width:768px){
    .kn-hero { min-height:520px; padding:90px 0 44px; }
    .kn-hero-meta { flex-direction:column; }
    .kn-hero-meta div { border-right:none; border-bottom:1px solid rgba(255,255,255,.24);
        padding:14px 0; margin-right:0; }
    .kn-hero-meta div:last-child { border-bottom:none; }
    .kn-comp,.kn-mat,.kn-tech,.kn-made,.kn-choose,.kn-perso,.kn-vs,.kn-seo,.kn-faq,.kn-paths,.kn-final { padding:60px 0; }
    .kn-made-track { grid-template-columns:1fr; }
    .kn-spec { grid-template-columns:1fr; }
    .kn-spec div:nth-child(odd) { border-right:none; padding-right:0; }
    .kn-spec div:nth-child(even) { padding-left:0; }
    .kn-pane-body,.kn-reco { padding:24px 20px; }
    .kn-switch { width:100%; }
    .kn-switch button { flex:1; padding:12px 8px; font-size:.86rem; }
    .kn-btn,.kn-pane-acts .kn-btn { width:100%; }
    .kn-vs-table { font-size:.84rem; }
    .kn-vs-table th,.kn-vs-table td { padding:10px 11px; }
    .kn-preview { padding:22px; min-height:320px; }
}
@media (prefers-reduced-motion:reduce){
    .kn-js .kn-rv { opacity:1; transform:none; transition:none; }
    .kn * { transition:none!important; animation:none!important; }
}