/* Pages de cocon (guides) — construire-au-naturel.fr */
.cocon { --g:#2F6B4F; --gd:#234F3A; --gt:#EAF3EE; --w:#8A5A1E; --wt:#F7EFE3; --ink:#1E2124; --mu:#5B6460; --li:#E4E7E5; --sf:#F7F9F8;
  --r:16px; --f:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-family:var(--f); color:var(--ink); background:#fff; }
.cocon *, .cocon *::before, .cocon *::after { box-sizing:border-box; }
.cocon-wrap { max-width:1200px; margin:0 auto; padding:18px 24px 64px; }
.cocon a { color:var(--g); }
.cocon-crumb { font-size:13.5px; margin-bottom:10px; }

.cocon-head { max-width:820px; padding:12px 0 18px; }
.cocon-eyebrow { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--w); background:var(--wt); padding:6px 14px; border-radius:999px; margin:0 0 14px; }
.cocon-head h1 { font-size:clamp(28px,3.6vw,42px); line-height:1.15; font-weight:800; margin:0 0 12px; padding:0; color:var(--ink); letter-spacing:-.015em; }
.cocon-meta { color:var(--mu); font-size:14px; margin:0; line-height:1.5; }

.cocon-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; }
.cocon-body { min-width:0; font-size:17px; line-height:1.72; max-width:780px; }
.cocon-body > p:first-of-type { font-size:18.5px; line-height:1.65; color:#2b3133; }
.cocon-body h2 { font-size:clamp(23px,2.4vw,29px); line-height:1.25; font-weight:750; margin:46px 0 14px; padding:0; color:var(--ink); scroll-margin-top:100px; }
.cocon-body h3 { font-size:20px; line-height:1.3; font-weight:700; margin:30px 0 10px; padding:0; color:var(--ink); scroll-margin-top:100px; }
.cocon-body p { margin:0 0 16px; padding:0; }
.cocon-body ul, .cocon-body ol { margin:0 0 18px; padding-left:24px; }
.cocon-body li { margin:0 0 8px; }
.cocon-body strong { color:#14181a; }
.cocon-body a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.cocon-body .cocon-lien-brouillon { text-decoration-style:dashed; color:var(--w); }

/* tableaux */
.cocon-body .wp-block-table { margin:6px 0 26px; overflow-x:auto; }
.cocon-body table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; background:#fff; border:1px solid var(--li); }
.cocon-body th { background:var(--gt); color:var(--gd); text-align:left; font-weight:700; padding:11px 14px; border:0; border-bottom:1px solid var(--li); }
.cocon-body td { padding:10px 14px; border:0; border-bottom:1px solid var(--li); vertical-align:top; }
.cocon-body tr:last-child td { border-bottom:0; }
.cocon-body .wp-block-table figcaption { font-size:13px; color:var(--mu); margin-top:6px; }

/* images */
.cocon-body .wp-block-image { margin:8px 0 26px; }
.cocon-body .wp-block-image img { border-radius:14px; width:100%; height:auto; display:block; }
.cocon-body .wp-block-image figcaption { font-size:13.5px; color:var(--mu); text-align:left; margin-top:8px; }
.cocon-slot-vide { margin:8px 0 26px; border:2px dashed #C9A97C; background:#FBF6EE; border-radius:14px; padding:18px 20px; }
.cocon-slot-inner { display:flex; flex-direction:column; gap:4px; font-size:15px; }
.cocon-slot-inner strong { color:var(--w); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.cocon-slot-ico { font-size:26px; }
.cocon-slot-inner em { color:var(--mu); font-size:14px; }
.cocon-slot-vide small { display:block; color:#9a7a4f; font-size:12.5px; margin-top:8px; }

/* encadrés */
.cocon-body .cocon-astuce { background:var(--gt); border-left:4px solid var(--g); border-radius:0 12px 12px 0; padding:16px 20px; margin:10px 0 24px; }
.cocon-body .cocon-astuce > :last-child { margin-bottom:0; }
.cocon-body .cocon-astuce > p:first-child::before { content:"Le conseil du magasin · "; font-weight:700; color:var(--gd); }
.cocon-body .cocon-attention { background:#FFF4E5; border-left:4px solid #D98B1E; border-radius:0 12px 12px 0; padding:16px 20px; margin:10px 0 24px; }
.cocon-body .cocon-attention > :last-child { margin-bottom:0; }
.cocon-body .cocon-attention > p:first-child::before { content:"Attention · "; font-weight:700; color:#9a5a00; }
.cocon-body .cocon-resume { background:var(--sf); border:1px solid var(--li); border-radius:14px; padding:16px 20px 6px; margin:4px 0 26px; }
.cocon-body .cocon-resume > p:first-child { font-weight:700; margin-bottom:8px; }

/* FAQ */
.cocon-body .cocon-faq { border-top:1px solid var(--li); margin-top:36px; }
.cocon-body .cocon-faq h3 { font-size:18px; margin:24px 0 8px; }

/* produits */
.cocon-prods { margin:8px 0 30px; }
.cocon-prods-t { font-weight:700; font-size:15px; color:var(--gd); margin:0 0 10px !important; }
.cocon-prods-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.cocon-pcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--li); border-radius:14px; overflow:hidden; text-decoration:none !important; color:var(--ink) !important; box-shadow:0 2px 8px rgba(30,33,36,.05); transition:box-shadow .15s, transform .15s; }
.cocon-pcard[data-cl] { cursor:pointer; }
.cocon-pcard .cocon-pname { color:inherit !important; text-decoration:none !important; }
.cocon-pcard:hover .cocon-pname, .cocon-pcard .cocon-pname:focus-visible { text-decoration:underline !important; }
.cocon-pcard:hover { box-shadow:0 10px 26px rgba(30,33,36,.10); transform:translateY(-2px); }
.cocon-pimg { position:relative; display:block; aspect-ratio:1/1; background:#fafafa; }
.cocon-pimg img { width:100%; height:100%; object-fit:contain; padding:10px; }
.cocon-top { position:absolute; top:10px; left:10px; background:var(--w); color:#fff; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; }
.cocon-ptxt { display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; font-size:14px; line-height:1.4; flex:1; }
.cocon-ptxt b { font-size:14.5px; }
.cocon-ptxt small { color:var(--mu); font-size:12.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cocon-pprice { font-weight:700; color:var(--gd); font-size:15px; margin-top:2px; }
.cocon-pprice i { font-style:normal; font-weight:500; font-size:12px; color:var(--mu); }
.cocon-pgo { color:var(--g); font-weight:600; font-size:13.5px; margin-top:auto; padding-top:4px; }
.cocon-prods-one .cocon-pcard-wide { flex-direction:row; align-items:stretch; }
.cocon-pcard-wide .cocon-pimg { width:170px; flex:0 0 170px; aspect-ratio:auto; min-height:150px; }
.cocon-pnote { color:#2b3133; font-size:14.5px; line-height:1.5; }

/* calculateurs */
.cocon-calc { background:linear-gradient(180deg,var(--wt),#fff 70%); border:1px solid #EADBC4; border-radius:18px; padding:22px; margin:10px 0 32px; scroll-margin-top:100px; }
.cocon-calc-t { font-weight:800; font-size:19px; margin:0 0 14px !important; color:var(--ink); }
.cocon-calc label { display:block; font-weight:600; font-size:14px; margin:0 0 6px; }
.cocon-calc .cc-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:14px; }
.cocon-calc input[type=number], .cocon-calc select { width:100%; font:500 15px var(--f); padding:10px 12px; border:1.5px solid #D9DEDB; border-radius:10px; background:#fff; color:var(--ink); }
.cocon-calc .cc-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cocon-calc .cc-chip { border:1.5px solid #D9DEDB; background:#fff; border-radius:999px; padding:8px 14px; font:600 14px var(--f); cursor:pointer; color:var(--ink); }
.cocon-calc .cc-chip.on { border-color:var(--g); background:var(--gt); color:var(--gd); }
.cocon-calc .cc-layers { display:grid; gap:8px; margin-bottom:14px; }
.cocon-calc .cc-layer { display:grid; grid-template-columns:auto 1fr 120px; gap:10px; align-items:center; background:#fff; border:1px solid var(--li); border-radius:12px; padding:10px 12px; font-size:14.5px; }
.cocon-calc .cc-layer input[type=number] { padding:7px 10px; }
.cocon-calc .cc-out { background:#fff; border:1px solid var(--li); border-radius:14px; padding:14px 16px; overflow-x:auto; }
.cocon-calc .cc-out table { width:100%; border-collapse:collapse; font-size:14.5px; border:0; }
.cocon-calc .cc-out th, .cocon-calc .cc-out td { padding:8px 6px; border:0; border-bottom:1px solid var(--li); text-align:left; background:none; color:var(--ink); }
.cocon-calc .cc-out th { font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--mu); }
.cocon-calc .cc-total { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:800; font-size:19px; color:var(--gd); padding-top:10px; }
.cocon-calc .cc-hyp { font-size:12.5px; color:var(--mu); margin:10px 0 0 !important; line-height:1.5; }
.cocon-calc .cc-best { background:var(--gt); color:var(--gd); border-radius:10px; padding:10px 12px; font-weight:600; font-size:14.5px; margin-top:10px; }
.cocon-calc a.cc-btn { display:inline-flex; margin:12px 8px 0 0; background:var(--g); color:#fff !important; text-decoration:none !important; padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px; }

/* colonne latérale */
.cocon-side { position:sticky; top:96px; }
.cocon-side-in { display:flex; flex-direction:column; gap:16px; }
.cocon-side-title { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mu); margin:0 0 8px; }
.cocon-toc { background:var(--sf); border:1px solid var(--li); border-radius:14px; padding:14px 16px; max-height:52vh; overflow:auto; }
.cocon-toc ol { list-style:none; margin:0; padding:0; }
.cocon-toc li { margin:0; }
.cocon-toc a { display:block; padding:6px 8px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:14px; line-height:1.35; }
.cocon-toc a:hover { background:#fff; }
.cocon-toc a.on { background:var(--gt); color:var(--gd); font-weight:600; }
.cocon-side-cta { display:block; text-align:center; background:var(--g); color:#fff !important; text-decoration:none; font-weight:700; border-radius:999px; padding:12px 16px; font-size:14.5px; }
.cocon-side-prods { border:1px solid var(--li); border-radius:14px; padding:14px 14px 8px; }
.cocon-side-prod { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink) !important; padding:6px 0; font-size:13.5px; line-height:1.3; }
.cocon-side-prod img { width:48px; height:48px; object-fit:contain; border-radius:8px; background:#fafafa; flex:0 0 48px; }
.cocon-side-prod b { display:block; font-weight:600; }
.cocon-side-prod[data-cl] { cursor:pointer; }
.cocon-side-prod[data-cl]:hover b, .cocon-side-prod[data-cl]:focus-visible b { text-decoration:underline; }
.cocon-side-prod em { font-style:normal; color:var(--gd); font-weight:700; }
.cocon-side-help { background:var(--wt); border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.5; }
.cocon-side-help p { margin:0 0 8px; padding:0; }
.cocon-side-help a { font-weight:700; }

/* navigation du cocon */
.cocon-nav { margin-top:56px; border-top:1px solid var(--li); padding-top:28px; }
.cocon-nav h2 { font-size:22px; margin:0 0 14px; padding:0; }
.cocon-nav ul { list-style:none; margin:0; padding:0; columns:2 300px; column-gap:32px; }
.cocon-nav li { break-inside:avoid; padding:5px 0; font-size:15px; }
.cocon-nav li.lvl-0 { font-weight:700; }
.cocon-nav li.lvl-2 { padding-left:18px; font-size:14.5px; }
.cocon-nav li.is-current span { font-weight:700; color:var(--mu); }
.cocon-badge { display:inline-block; font-size:11px; font-weight:700; background:#FCE9C9; color:#8a5a00; border-radius:999px; padding:1px 8px; vertical-align:middle; }

/* bloc « Guides » sur les pages mères existantes */
.cocon-guides { --g:#2F6B4F; --gd:#234F3A; --li:#E4E7E5; padding:48px 0; border-top:1px solid #E4E7E5; font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.cocon-guides-in { max-width:1200px; margin:0 auto; padding:0 24px; }
.cocon-guides h2 { font-size:clamp(22px,2.6vw,28px); margin:0 0 18px; text-align:center; padding:0; }
.cocon-guides-note { text-align:center; color:#8a5a00; font-size:14px; }
.cocon-guides-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.cocon-guide-item { background:#fff; border:1px solid var(--li); border-radius:14px; padding:16px 18px; }
.cocon-guide-item > a { color:var(--gd); text-decoration:none; font-size:16px; }
.cocon-guide-item ul { list-style:none; margin:8px 0 0; padding:0; font-size:14px; }
.cocon-guide-item ul li { padding:3px 0; }
.cocon-guide-item ul a { color:var(--g); }

/* bandeau d'aperçu */
.cocon-apercu-bandeau { position:sticky; top:0; z-index:99999; background:#8A5A1E; color:#fff; text-align:center; font:600 14px "Segoe UI",system-ui,sans-serif; padding:8px 12px; }
.cocon-apercu-bandeau a { color:#fff; text-decoration:underline; }

@media (max-width: 1000px) {
  .cocon-layout { grid-template-columns:1fr; gap:24px; }
  .cocon-side { position:static; order:-1; }
  .cocon-side-prods, .cocon-side-help { display:none; }
  .cocon-toc { max-height:none; }
  .cocon-toc:not(.open) ol { display:none; }
  .cocon-toc .cocon-side-title { cursor:pointer; margin:0; display:flex; justify-content:space-between; }
  .cocon-toc .cocon-side-title::after { content:"▾"; }
  .cocon-toc.open .cocon-side-title { margin-bottom:8px; }
}
@media (max-width: 640px) {
  .cocon-wrap { padding:12px 16px 48px; }
  .cocon-body { font-size:16.5px; }
  .cocon-body > p:first-of-type { font-size:17.5px; }
  .cocon-pcard-wide .cocon-pimg { width:110px; flex-basis:110px; }
  .cocon-calc { padding:16px; }
  .cocon-calc .cc-layer { grid-template-columns:auto 1fr; }
  .cocon-calc .cc-layer > :last-child { grid-column:1 / -1; }
}

.cocon-guides-cross { margin:28px 0; }
.cocon-guide-desc { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:#5B6460; }