/* Meilleur Tracteur Tondeuse : feuille de style partagee */

:root{
    --cream:#FFF6E5; --cream-2:#FFEFD4; --paper:#FFFDF7; --card:#FAF7F0;
    --green:#4C8C4A; --green-d:#3A5C2A; --green-pale:#D9EFC9; --green-lite:#8FBF6E;
    --yellow:#F4B942; --yellow-d:#4A2F0E;
    --orange:#E2703A; --orange-d:#B85328; --peach:#FCE3C3;
    --ink:#2E3B22; --soft:#5A6B45; --muted:#8A7A4E; --line:#EFE6D2; --line-2:#E7D9B0;
  }
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--cream);font-family:'Nunito',sans-serif;color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}
a.link:hover{opacity:.75}
h1,h2,h3,h4,.bx-h{font-family:'Fredoka',sans-serif;margin:0;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px}
.shell{max-width:1180px;margin:0 auto;background:var(--paper);box-shadow:0 4px 40px rgba(180,120,40,.1)}
.pad{padding-inline:44px}
.eyebrow{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.h2{font-size:1.7rem;font-weight:700;margin-top:8px}
.sub{margin-top:12px;color:var(--soft);font-size:1.05rem}
.btn-o{background:var(--orange);color:#fff;font-weight:700;padding:13px 26px;border-radius:999px;box-shadow:0 4px 0 var(--orange-d);display:inline-flex;align-items:center;gap:8px}
.btn-g{background:var(--green);color:#fff;font-weight:700;font-size:.85rem;padding:10px 18px;border-radius:999px;white-space:nowrap;display:inline-block}
.btn-w{background:#fff;border:2px solid var(--line-2);color:var(--ink);font-weight:700;padding:11px 24px;border-radius:999px;display:inline-block}
.chip{background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:.8rem;color:var(--soft)}
.prose{color:var(--soft);max-width:70ch}
.prose + .prose{margin-top:12px}
.prose b{color:var(--ink)}
/* header */
  .hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 44px;background:var(--cream);border-bottom:4px solid var(--yellow);gap:16px;flex-wrap:wrap}
.hdr-nav{display:flex;align-items:center;gap:24px;font-weight:700;font-size:.9rem;color:var(--soft);flex-wrap:wrap}
.nl-obf{cursor:pointer}
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;flex-direction:column;gap:2px;min-width:220px;box-shadow:0 10px 28px rgba(0,0,0,.12);z-index:60}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.open .nav-drop-menu{display:flex}
.nav-drop-menu a{padding:9px 12px;border-radius:10px;color:var(--soft);font-weight:700;font-size:.86rem;display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-drop-menu a:hover{background:var(--cream-2);color:var(--green)}
/* hero */
  .hero{position:relative;padding:56px 44px 52px;background:linear-gradient(180deg,var(--cream),var(--cream-2));overflow:hidden}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.blob{position:absolute;border-radius:50%}
/* quick answer */
  .qa{background:#fff;border:3px solid var(--yellow);border-radius:26px;padding:26px 28px;margin-top:-30px;position:relative;z-index:2}
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.qa-item{background:var(--cream);border-radius:16px;padding:16px 18px;display:block}
.qa-item:hover{background:var(--cream-2)}
.qa-item .t{font-weight:800;font-size:.74rem;text-transform:uppercase;color:var(--green)}
.qa-item .m{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;margin-top:4px}
.qa-item .d{font-size:.84rem;color:var(--soft);margin-top:2px}
/* product cards */
  .pcard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px}
.pcard.first{background:var(--cream);border:3px solid var(--yellow)}
.p-top{display:grid;grid-template-columns:220px 1fr auto;gap:26px;align-items:start}
.p-photo{aspect-ratio:4/3;background:linear-gradient(135deg,var(--green-pale),var(--peach));border-radius:18px;display:flex;align-items:center;justify-content:center;position:relative;padding:18px}
.p-photo .tag{position:absolute;top:8px;right:8px;background:#fff;border-radius:999px;font-size:.62rem;padding:3px 9px;color:var(--muted);font-weight:700}
.badge{display:inline-block;background:var(--green-pale);color:var(--green-d);font-weight:700;font-size:.72rem;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.badge.gold{background:var(--yellow);color:var(--yellow-d)}
.p-name{font-size:1.34rem;font-weight:700}
.p-name span{color:var(--muted);font-weight:500;font-style:italic;font-family:'Nunito',sans-serif;font-size:1rem}
.p-note{display:flex;align-items:center;gap:12px;margin-top:8px}
.p-note .n{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--green);font-size:1.05rem}
.p-note .s{color:var(--yellow)}
.p-sub{font-size:.82rem;color:var(--muted);font-weight:700;margin-top:4px}
.p-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.p-price{font-weight:800;color:var(--orange);font-size:1.25rem}
.p-price small{display:block;font-size:.68rem;font-weight:600;color:var(--muted)}
.pourvous{background:var(--green-pale);border-radius:14px;padding:12px 16px;font-size:.92rem;color:var(--green-d)}
.pourvous b{text-transform:uppercase;font-size:.74rem;letter-spacing:.03em}
.pm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pm .col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.pm h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;font-family:'Nunito',sans-serif;font-weight:800}
.pm .plus h4{color:var(--green)}
.pm .moins h4{color:var(--orange)}
.pm li{font-size:.9rem;color:var(--soft);padding-left:22px;position:relative;margin-top:6px}
.pm .plus li::before{content:"✔";position:absolute;left:0;color:var(--green);font-weight:800}
.pm .moins li::before{content:"✘";position:absolute;left:0;color:var(--orange);font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* table */
  .tbl-wrap{background:#fff;border-radius:20px;border:1px solid var(--line);overflow-x:auto;margin-top:16px}
table{width:100%;border-collapse:collapse;min-width:820px}
thead tr{background:var(--green)}
th{padding:14px 18px;text-align:left;color:#fff;font-size:.76rem;text-transform:uppercase;font-weight:700}
td{padding:14px 18px;border-bottom:1px solid #F1EADA;font-size:.95rem}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--cream)}
tr.hl{background:var(--cream)}
td.mod{font-weight:700}
td.mod small{display:block;font-weight:500;color:var(--muted);font-style:italic;font-size:.82rem}
td.note{color:var(--orange);font-weight:700}
/* finder */
  .finder{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px}
.f-q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;margin-bottom:12px}
.f-opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.f-btn{background:var(--cream);border:2px solid var(--line-2);border-radius:999px;padding:10px 20px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;color:var(--soft);cursor:pointer}
.f-btn.on{background:var(--green);border-color:var(--green);color:#fff}
.f-res{display:none;background:var(--green-pale);border-radius:18px;padding:20px 24px;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.f-res.show{display:flex}
/* segments */
  .seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.seg{background:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line)}
.seg .t{color:var(--green);font-weight:700;font-size:.76rem;text-transform:uppercase}
.seg h3{font-size:1.05rem;font-weight:700}
.seg p{color:var(--soft);font-size:.92rem;flex:1}
.seg .go{color:var(--orange);font-weight:700;font-size:.86rem}
/* guide besoins */
  .need{background:var(--cream);border-radius:20px;padding:26px 28px}
.need + .need{margin-top:18px}
.need h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.need .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.need .tags span{background:#fff;border:1px solid var(--line-2);color:var(--green-d);font-size:.8rem;font-weight:700;padding:5px 12px;border-radius:999px}
/* marques */
  .mq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mq{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.mq h3{font-size:1.1rem;margin-bottom:8px}
.mq p{color:var(--soft);font-size:.94rem}
/* ecartes */
  .out{background:#fff;border:1px dashed var(--line-2);border-radius:18px;padding:20px 24px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.out + .out{margin-top:14px}
.out .x{width:36px;height:36px;background:var(--peach);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:800}
.out h3{font-size:1rem;margin-bottom:4px}
.out p{color:var(--soft);font-size:.92rem}
/* faq */
  .faq{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 28px}
.faq + .faq{margin-top:16px}
.faq h3{font-size:1.05rem;margin-bottom:8px;margin-top:0}
.faq p{color:var(--soft)}
/* guides blog */
  .bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bl{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.bl .k{font-size:.72rem;font-weight:800;text-transform:uppercase;color:var(--green)}
.bl h3{font-size:1rem}
.bl p{color:var(--soft);font-size:.88rem;flex:1}
.bl .go{color:var(--orange);font-weight:700;font-size:.84rem}
.bl.soon{opacity:.6;cursor:default}
.bl.soon .go{color:var(--muted)}
.cat-block{margin-top:40px}
.cat-block:first-of-type{margin-top:0}
.cat-block h2{font-size:1.2rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.cat-block h2 .n{background:var(--green-pale);color:var(--green-d);font-family:'Nunito',sans-serif;font-weight:800;font-size:.72rem;padding:3px 10px;border-radius:999px}
footer{background:var(--ink);color:#B9C9A9;padding:56px 44px 28px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer .ft-h{color:#fff;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;text-transform:uppercase;margin-bottom:16px}
footer ul{display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 44px;background:var(--cream);border-bottom:4px solid var(--yellow);gap:16px;flex-wrap:wrap}
.crumb{padding:14px 44px 0;font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--green);font-weight:700}
.crumb span.sep{color:var(--line-2)}
.hero{position:relative;padding:32px 44px 40px;background:linear-gradient(180deg,var(--cream),var(--cream-2));overflow:hidden}
.qa{background:#fff;border:3px solid var(--yellow);border-radius:26px;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.qa .who{flex:1;min-width:220px}
.qa .who .t{font-weight:800;font-size:.74rem;text-transform:uppercase;color:var(--green)}
.qa .who .m{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.25rem;margin-top:4px}
.qa .who .d{font-size:.88rem;color:var(--soft);margin-top:4px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px}
.tbl-wrap{background:#fff;border-radius:22px;border:1px solid var(--line);overflow-x:auto}
.need{background:var(--cream);border-radius:20px;padding:24px 26px}
.neighbor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.neighbor{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;align-items:center;gap:16px}
.neighbor .t{font-size:.74rem;font-weight:800;text-transform:uppercase;color:var(--muted)}
.neighbor h3{font-size:1.02rem;margin-top:2px}
.neighbor .go{color:var(--orange);font-weight:700;font-size:.84rem;margin-top:4px;display:block}
.faq{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 26px}
.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
ul,ol{margin:0;padding:0;list-style:none}
.article h2{font-size:1.4rem;font-weight:700;margin-top:44px;scroll-margin-top:90px}
.article h2:first-of-type{margin-top:0}
.article h3{font-size:1.1rem;font-weight:700;margin-top:26px;scroll-margin-top:90px}
.article > p, .article > .prose{margin-top:14px}
/* article header */
  .art-hero{padding:28px 44px 0}
.art-kicker{display:inline-block;background:var(--green);color:#fff;font-weight:700;font-size:.78rem;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.art-hero h1{font-size:2.1rem;font-weight:700;line-height:1.2;max-width:24ch}
.art-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:.86rem;color:var(--muted);font-weight:700}
.art-meta .dot{width:4px;height:4px;background:var(--line-2);border-radius:50%}
/* layout: content + toc */
  .art-layout{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:start;padding:32px 44px 0}
.toc{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.toc .t{font-size:.74rem;font-weight:800;text-transform:uppercase;color:var(--green);letter-spacing:.03em}
.toc ol{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.toc a{font-size:.88rem;color:var(--soft);display:flex;gap:8px}
.toc a:hover{color:var(--green)}
.toc a b{color:var(--muted);font-weight:700}
/* callouts */
  .callout{border-radius:16px;padding:18px 20px;margin-top:20px;display:flex;gap:14px}
.callout.warn{background:var(--peach);border:1px solid #E3CBA8}
.callout.tip{background:var(--green-pale);border:1px solid #C6E2B4}
.callout .bx-h{font-size:.95rem;font-weight:700;margin-bottom:4px}
.callout.warn .bx-h{color:var(--orange-d)}
.callout.tip .bx-h{color:var(--green-d)}
.callout p{font-size:.92rem;color:var(--soft)}
td.k{font-weight:700}
/* listes a puces dans le corps d'article (ul,ol sont list-style:none globalement) */
.blist{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.blist li{position:relative;padding-left:22px;color:var(--soft);line-height:1.6}
.blist li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.callout .blist li{font-size:.92rem}
/* steps */
  .steps{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.step{display:grid;grid-template-columns:40px 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.step .no{width:32px;height:32px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--yellow-d);font-size:.95rem}
.step .bx-h{font-size:.98rem;font-weight:700;margin-bottom:4px}
.step p{font-size:.9rem;color:var(--soft)}
/* related */
  .bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* bridge to home */
  .bridge{background:var(--peach);border:1px solid #E3CBA8;border-radius:22px;padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.bridge h3{font-size:1.02rem;margin-bottom:4px}
.bridge p{color:var(--soft);font-size:.9rem}

/* --- media queries --- */
@media(max-width:760px){.pad{padding-inline:20px}}
@media(max-width:760px){.hdr{padding:12px 20px}}
@media(max-width:980px){
  .hdr{flex-direction:column;align-items:flex-start;gap:12px}
  .hdr-nav{width:100%;gap:14px 18px;font-size:.85rem}
  .nav-drop-menu{position:static;transform:none;display:none;margin-top:8px;box-shadow:none;min-width:0;width:100%}
  .nav-drop{flex-direction:column;align-items:flex-start;width:100%}
  .nav-drop::after{display:none}
  .nav-drop:hover .nav-drop-menu{display:none}
  .nav-drop.open .nav-drop-menu{display:flex}
}
@media(max-width:760px){.hero{padding:40px 20px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
@media(max-width:860px){.qa-grid{grid-template-columns:1fr}}
@media(max-width:900px){.p-top{grid-template-columns:1fr}}
@media(max-width:900px){.p-side{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;width:100%}}
@media(max-width:760px){.pm{grid-template-columns:1fr}}
@media(max-width:920px){.seg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.seg-grid{grid-template-columns:1fr}}
@media(max-width:820px){.mq-grid{grid-template-columns:1fr}}
@media(max-width:920px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bl-grid{grid-template-columns:1fr}}
@media(max-width:760px){footer{padding:40px 20px 24px}}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-grid{grid-template-columns:1fr}}
@media(max-width:760px){.crumb{padding:14px 20px 0}}
@media(max-width:760px){.hero{padding:24px 20px 32px}}
@media(max-width:700px){.neighbor-grid{grid-template-columns:1fr}}
@media(max-width:760px){.art-hero{padding:20px 20px 0}}
@media(max-width:900px){.art-layout{grid-template-columns:1fr;padding:24px 20px 0}}
@media(max-width:900px){.toc{position:static;margin-bottom:8px}}
@media(max-width:700px){.bridge{grid-template-columns:1fr}}