/* Style des articles de blog Kanea — 04/07/2026, MAJ 07/07/2026 v1.5 : réponse-en-bref version subtile (.k-label masqué, .k-reponse allégé en filet turquoise). Charte turquoise (regles-branding). Ne s'applique qu'aux articles (mu-plugin kanea-blog-style.php, is_single). */
.kbody .prose{font-size:17px;line-height:1.85;color:#2e2e2e;max-width:760px;margin-left:auto;margin-right:auto}
.kbody .prose>p:first-of-type{font-size:19px;line-height:1.75;color:#17181A}
.kbody .prose h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(26px,3.2vw,34px);line-height:1.15;color:#0C7077;margin:2.1em 0 .55em}
.kbody .prose h2::before{content:"";display:block;width:46px;height:4px;border-radius:4px;background:#15B7C0;margin-bottom:14px}
.kbody .prose h3{font-size:20px;color:#17181A;margin:1.6em 0 .4em}
.kbody .prose p{margin:0 0 1.15em}
.kbody .prose ul{padding-left:2px;list-style:none;margin:0 0 1.3em}
.kbody .prose ul li{position:relative;padding-left:26px;margin:0 0 10px;line-height:1.7}
.kbody .prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:#FB6B4C}
.kbody .prose ol li{margin:0 0 10px;line-height:1.7}
.kbody .prose a{color:#0C7077;text-decoration:underline;text-underline-offset:3px}
.kbody .prose figure.wp-block-image img{border-radius:14px;box-shadow:0 10px 30px rgba(23,24,26,.12)}
.kbody .prose figcaption{color:#8a8170;font-size:13.5px;margin-top:8px;text-align:center}
.kbody .prose blockquote{background:#F4ECDD;border-left:5px solid #15B7C0;border-radius:0 14px 14px 0;padding:22px 26px;margin:1.8em 0;font-style:normal;color:#17181A}
.kbody .prose blockquote p{margin:0}
.kbody .prose table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:15.5px;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(23,24,26,.08)}
.kbody .prose th{background:#0C7077;color:#fff;text-align:left;padding:12px 14px;font-weight:600}
.kbody .prose td{padding:11px 14px;border-bottom:1px solid #eee6d6}
.kbody .prose tr:nth-child(even) td{background:#faf6ec}
.kbody .prose details.kfaq{background:#fff;border:1px solid #e7e0d2;border-radius:12px;padding:0;margin:0 0 12px;box-shadow:0 4px 14px rgba(23,24,26,.06)}
.kbody .prose details.kfaq summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;font-weight:600;color:#0C7077;position:relative;font-size:16.5px;line-height:1.5}
.kbody .prose details.kfaq summary::-webkit-details-marker{display:none}
.kbody .prose details.kfaq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;color:#FB6B4C;font-weight:400;transition:transform .25s}
.kbody .prose details.kfaq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.kbody .prose details.kfaq .kfaq-rep{padding:0 18px 16px;color:#3a3a3a;line-height:1.75}
.kbody .prose details.kfaq .kfaq-rep p{margin:0 0 .8em}
.kbody .prose .kfaq-titre{margin-top:2.1em}
.kbody .prose strong{background:linear-gradient(transparent 58%,rgba(21,183,192,.22) 58%);padding:0 2px;color:#17181A}
.kbody .prose>p:first-of-type:not([class])::first-letter{font-family:"DM Serif Display",Georgia,serif;font-size:3.3em;line-height:.82;float:left;padding:5px 10px 0 0;color:#0C7077}
.kbody .prose hr{border:none;margin:2.2em 0;text-align:center}
.kbody .prose hr::before{content:"\00B7\2002\00B7\2002\00B7";color:#15B7C0;font-size:26px;letter-spacing:8px;font-weight:700}
.kbody .prose .k-reponse{padding:4px 0 4px 22px;margin:0 0 1.8em;border-left:3px solid #15B7C0}
.kbody .prose .k-reponse .k-label{display:none}
.kbody .prose .k-reponse p{margin:0;font-size:16.5px;line-height:1.7}
.kbody .prose .k-reponse strong{background:none;color:#0C7077}
.kbody .prose .k-reponse::first-letter{font-size:inherit}
.kbody .prose .k-etape{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e7e0d2;border-radius:12px;padding:16px 18px;margin:0 0 12px;box-shadow:0 4px 14px rgba(23,24,26,.06)}
.kbody .prose .k-etape .k-num{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#FB6B4C;color:#fff;display:flex;align-items:center;justify-content:center;font-family:"DM Serif Display",Georgia,serif;font-size:22px;margin-top:2px}
.kbody .prose .k-etape .k-num.k-num-c{background:#FB6B4C}
.kbody .prose .k-etape .k-etape-txt{flex:1;line-height:1.7}
.kbody .prose .k-etape .k-etape-txt strong{background:none;color:#0C7077}

/* ===== v1.6 — 26/07/2026 : "l'oeil ne doit pas s'ennuyer" (demande Karine) =====
   Listes numerotees visuelles, sommaire, encadres, respiration. S'applique a TOUS
   les articles sans toucher a leur contenu. */

/* 1. Listes numerotees : gros chiffre turquoise dans une pastille */
.kbody .prose ol{list-style:none;counter-reset:kn;padding-left:0;margin:0 0 1.4em}
.kbody .prose ol>li{counter-increment:kn;position:relative;padding:2px 0 2px 52px;margin:0 0 14px;line-height:1.75}
.kbody .prose ol>li::before{content:counter(kn);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:50%;background:#0C7077;color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"DM Serif Display",Georgia,serif;font-size:19px;line-height:1}

/* 2. Sommaire (genere par le mu-plugin) — donne envie de descendre */
.kbody .prose .ksom{background:#F4ECDD;border-radius:14px;padding:20px 24px;margin:0 0 2em}
.kbody .prose .ksom-t{font-family:"DM Serif Display",Georgia,serif;font-size:19px;color:#0C7077;margin:0 0 10px}
.kbody .prose .ksom ol{margin:0;counter-reset:ks}
.kbody .prose .ksom ol>li{counter-increment:ks;padding:5px 0 5px 34px;margin:0;border-bottom:1px dashed #ddd0b6}
.kbody .prose .ksom ol>li:last-child{border-bottom:none}
.kbody .prose .ksom ol>li::before{content:counter(ks);width:24px;height:24px;font-size:14px;background:#15B7C0;top:6px}
.kbody .prose .ksom a{text-decoration:none;color:#17181A}
.kbody .prose .ksom a:hover{color:#0C7077;text-decoration:underline}

/* 3. Encadre conseil / a retenir */
.kbody .prose .k-astuce{background:#fff;border:1px solid #e7e0d2;border-left:5px solid #FB6B4C;border-radius:0 14px 14px 0;
  padding:18px 22px;margin:1.8em 0;box-shadow:0 6px 18px rgba(23,24,26,.07)}
.kbody .prose .k-astuce p{margin:0 0 .6em}.kbody .prose .k-astuce p:last-child{margin:0}
.kbody .prose .k-astuce strong{background:none;color:#0C7077}

/* 4. Sous-titres plus marques + respiration */
.kbody .prose h3{position:relative;padding-left:16px;color:#0C7077}
.kbody .prose h3::before{content:"";position:absolute;left:0;top:.22em;width:5px;height:1em;border-radius:3px;background:#FB6B4C}
.kbody .prose h2+p{font-size:17.5px}
.kbody .prose figure{margin:1.9em 0}

/* 5. Mobile : ponctuation et titres qui ne se coupent pas */
.kbody .prose h1,.kbody .prose h2,.kbody .prose h3{hyphens:none;overflow-wrap:break-word}
@media(max-width:600px){
  .kbody .prose{font-size:16.5px}
  .kbody .prose ol>li{padding-left:46px}
  .kbody .prose ol>li::before{width:32px;height:32px;font-size:17px}
  .kbody .prose .ksom{padding:16px 18px}
}


/* === v1.7 — 26/07/2026 : LISIBILITE DES TABLEAUX (demande Karine « l'ecriture du tableau est tres claire »)
   Le theme appliquait font-weight:300 aux cellules : texte fin et pale, dur a lire sur telephone. */
.kbody .prose table{font-size:16px}
.kbody .prose td{color:#17181A !important;font-weight:400 !important;line-height:1.6}
.kbody .prose td strong,.kbody .prose td b{font-weight:700 !important;color:#0C7077}
.kbody .prose td:first-child{font-weight:600 !important;color:#0C7077}
.kbody .prose th{font-weight:700 !important;font-size:15.5px;letter-spacing:.01em}
.kbody .prose tr:nth-child(even) td{background:#f7f1e4}
.kbody .prose tbody tr:hover td{background:#eee6d4}
/* sur telephone : tableau lisible et jamais coupe */
@media(max-width:600px){
  .kbody .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:15px}
  .kbody .prose td,.kbody .prose th{padding:10px 11px}
}


/* ===== v1.8 — 26/07/2026 : DU PEPS, avec le corail (demande Karine :
   « joue avec le corail aussi, il faut du peps ! le surlignage en turquoise est bof,
   et joue avec le gras »). Le turquoise reste la couleur des titres et des liens,
   le CORAIL devient la couleur qui accroche l'oeil dans le texte. ===== */

/* 1. Le surlignage passe en corail, plus franc, et le mot est vraiment gras */
.kbody .prose strong{
  background:linear-gradient(transparent 55%,rgba(251,107,76,.38) 55%);
  padding:0 3px;color:#17181A;font-weight:700}
/* deux niveaux de gras : <b> = accent fort, corail plein, sans surlignage */
.kbody .prose b{color:#E24E2C;font-weight:700;background:none}
/* dans les encadres et la reponse directe, on garde le turquoise (pas de surcharge) */
.kbody .prose .k-reponse strong,.kbody .prose .k-astuce strong{background:none;color:#0C7077;font-weight:700}

/* 2. Les titres reprennent du corail */
.kbody .prose h2::before{background:#FB6B4C}
.kbody .prose h2 em,.kbody .prose h2 strong{color:#E24E2C;background:none}

/* 3. Les chiffres des listes numerotees : corail (c'est ce que l'oeil suit) */
.kbody .prose ol>li::before{background:#FB6B4C}
.kbody .prose .ksom ol>li::before{background:#FB6B4C}

/* 4. Tableaux : l'en-tete reste turquoise, mais les valeurs cles ressortent en corail */
.kbody .prose td strong,.kbody .prose td b{color:#E24E2C;background:none;font-weight:700}

/* 5. Citations : filet corail */
.kbody .prose blockquote{border-left-color:#FB6B4C}

/* 6. Separateurs : points corail */
.kbody .prose hr::before{color:#FB6B4C}