/* Gazon Malin (07/11/2026) : carnet de jardin. Papier crème, vert mousse, pelouse tondue en bandes, terre cuite pour l'action. Bitter (titres) + Karla (texte). Fiche : theme/DA.md */
:root{
--papier:#f6f1e3;--carte:#fffdf6;--kraft:#efe5c9;--texte:#23281f;--doux:#5b6150;--ligne:#ded3b6;
--mousse:#24452a;--herbe:#3f7a34;--herbe-c:#4c8c3f;--herbe-p:#e5eed6;--lien:#2f6a2a;--terre:#b0541a;--terre-f:#7f3a0f;
--aff:#fbf0d2;--aff-ligne:#e6cf93;--ombre:0 14px 30px -18px rgba(36,48,24,.45);
--t:"Bitter",Georgia,"Times New Roman",serif;--x:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{
--papier:#121610;--carte:#1a2017;--kraft:#22291d;--texte:#e9e7da;--doux:#a8ac99;--ligne:#323a2b;
--mousse:#d3e8bd;--herbe-p:#1f2a1b;--lien:#a5d98a;--aff:#2a2614;--aff-ligne:#544a20;--ombre:0 14px 30px -18px rgba(0,0,0,.8)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--texte);font:400 17.5px/1.7 var(--x)}
.cont{max-width:1160px;margin:0 auto;padding:0 16px}
.page-texte{max-width:780px}
a{color:var(--lien);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--t);color:var(--mousse);letter-spacing:-.01em}
h1{font-weight:800;font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.1;margin:.25em 0 .35em;text-wrap:balance}
h2{font-weight:700;font-size:clamp(1.4rem,2.8vw,1.85rem);line-height:1.22;margin:2.3em 0 .6em}
h3{font-weight:700;font-size:1.18rem;margin:1.6em 0 .4em}
h2[id]{scroll-margin-top:12px}
.art h2:not(.selection__titre)::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--terre);margin:0 0 .55em}
.evite{position:absolute;left:-999px}.evite:focus{left:16px;top:8px;z-index:99;background:var(--carte);padding:8px 12px}
.feuille{width:1em;height:1em;vertical-align:-.12em;margin-right:.45em;color:var(--herbe-c)}

/* En-tête : papier, liseré de pelouse */
.ent{background:var(--papier);border-top:6px solid var(--herbe);border-bottom:1px solid var(--ligne)}
.ent__l{display:flex;align-items:center;justify-content:space-between;gap:8px 28px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo__m{width:44px;height:35px;flex:none}
.logo__t{font:800 1.45rem/1 var(--t);color:var(--mousse)}.logo__t em,.pied__logo em{font-style:italic;font-weight:500;color:var(--terre)}
@media (prefers-color-scheme:dark){.logo__t em,.pied__logo em{color:#e08a52}}
.menu{max-width:100%;overflow-x:auto;scrollbar-width:none}.menu::-webkit-scrollbar{display:none}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 22px;white-space:nowrap}
.menu a{display:block;padding:8px 0;text-decoration:none;color:var(--texte);font-weight:600;font-size:.98rem;border-bottom:3px solid transparent}
.menu a:hover{border-bottom-color:var(--herbe-p)}
.menu a[aria-current]{border-bottom-color:var(--terre);color:var(--mousse)}
@media (max-width:760px){.menu{-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}.menu li:last-child{padding-right:40px}.ent__l{padding-bottom:4px}.menu{width:calc(100% + 32px);margin:0 -16px;padding:0 16px}.menu ul{gap:18px}.menu a{font-size:.92rem}}

/* Héros : la pelouse tondue en bandes, calculateur sur une étiquette */
.pelouse{position:relative;background:repeating-linear-gradient(100deg,#3b7531 0 90px,#468a3a 90px 180px);color:#f6f1e3;padding:48px 0 64px}
.pelouse::after{content:"";position:absolute;left:0;right:0;bottom:-25px;height:26px;z-index:1;background:#3b7531;-webkit-mask:url(/herbe.svg) 0 0/120px 26px repeat-x;mask:url(/herbe.svg) 0 0/120px 26px repeat-x;transform:scaleY(-1)}
@media (prefers-color-scheme:dark){.pelouse{background:repeating-linear-gradient(100deg,#1d3a1a 0 90px,#234420 90px 180px)}.pelouse::after{background:#1d3a1a}}
.pelouse__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:44px;align-items:start}
.pelouse h1{color:#fffbea}
.sur{margin:0;font:700 .82rem/1.2 var(--x);letter-spacing:.09em;text-transform:uppercase;color:#e6f2c9}
.sur .feuille{color:#c9e59a}
.chapo{font-size:1.18rem;line-height:1.55;margin:0 0 1em}
.pelouse .chapo{color:#f0f4e2;max-width:32em}
.garanties{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:8px}
.garanties li{position:relative;padding-left:30px;font-weight:600;color:#fffbea}
.garanties li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:#f6f1e3 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10.5l3 3 7-7" fill="none" stroke="%233f7a34" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/14px no-repeat}
.sig{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.pelouse .signature,.pelouse .maj{color:#e3ecd0}
.pelouse .aff{background:rgba(20,35,15,.4);border-color:rgba(255,255,255,.25);color:#f6f1e3}.pelouse .aff a{color:#fff}
.pelouse__txt{position:sticky;top:24px}
.etiquette .res table{max-height:440px;overflow:auto}
.etiquette .res thead th{position:sticky;top:0;z-index:1}
.pelouse__second{margin:1.2em 0 0}.pelouse__second a{color:#fffbea;font-weight:700;font-size:1.02rem}
.pelouse__second a::after{content:" \2192"}
.etiquette{position:relative;background:var(--carte);color:var(--texte);border-radius:6px 6px 18px 18px;padding:26px 24px 22px;box-shadow:0 30px 50px -26px rgba(10,25,8,.75);border-top:10px solid var(--terre)}
.etiquette::before{content:"";position:absolute;top:-24px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--papier);border:5px solid var(--terre);box-sizing:border-box}
.etiquette__tag{display:inline-block;margin:0 0 .4em;font:700 .75rem/1 var(--x);letter-spacing:.1em;text-transform:uppercase;color:var(--terre);border:1.5px dashed var(--terre);padding:5px 9px;border-radius:4px}
@media (prefers-color-scheme:dark){.etiquette__tag{color:#e08a52;border-color:#e08a52}}
.etiquette__t{margin:0 0 .2em;font-size:1.6rem}.etiquette__t::before{display:none}
.etiquette__note{margin:0 0 .4em;color:var(--doux);font-size:.92rem;line-height:1.45}
.etiquette .outil{margin:0;padding:0;border:0;box-shadow:none;background:none}
@media (max-width:900px){.pelouse__txt{position:static}.pelouse{padding:28px 0 60px}.pelouse__g{grid-template-columns:minmax(0,1fr);gap:34px}.etiquette{padding:22px 16px 18px}}

@media (max-width:600px){.pelouse .chapo{font-size:1.04rem}.garanties{gap:4px;margin-bottom:.9em}.garanties li{font-size:.92rem;padding-left:26px}.garanties li::before{width:17px;height:17px;background-size:12px}.maj::before{display:none!important}.sig{gap:2px 12px}.pelouse__second{margin-top:.8em}}
/* Le carnet : sommaire des entrées */
.carnet{padding:54px 0 10px}
.carnet__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
.carnet h2{margin:0 0 .3em}.carnet h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--terre);margin:0 0 .55em}
.carnet__cote p{color:var(--doux);margin:0 0 1.2em}
.photo{margin:0;background:var(--carte);padding:10px 10px 8px;box-shadow:var(--ombre);transform:rotate(-1.6deg);border-radius:4px}
.photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.photo figcaption{font-size:.78rem;color:var(--doux);margin-top:6px;font-style:italic}
.sommaire-carnet{list-style:none;margin:0;padding:0;counter-reset:n;border-top:2px solid var(--mousse)}
.sommaire-carnet li{counter-increment:n;margin:0;border-bottom:1px dashed var(--ligne)}
.sommaire-carnet a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:4px 14px;align-items:baseline;padding:16px 4px;text-decoration:none;color:var(--texte)}
.sommaire-carnet a::before{content:counter(n,decimal-leading-zero);grid-row:span 2;font:800 1.5rem/1 var(--t);color:var(--terre)}
.sommaire-carnet a::after{content:"\2192";grid-row:1;grid-column:3;font:700 1.2rem var(--t);color:var(--herbe-c);transition:transform .15s}
.sommaire-carnet strong{font:700 1.16rem/1.3 var(--t);color:var(--mousse)}
.sommaire-carnet span{grid-column:2/4;color:var(--doux);font-size:.94rem;line-height:1.45}
.sommaire-carnet a:hover{background:var(--herbe-p)}.sommaire-carnet a:hover::after{transform:translateX(4px)}
@media (max-width:860px){.carnet{padding-top:36px}.carnet__g{grid-template-columns:1fr;gap:24px}.photo{display:none}.sommaire-carnet a{grid-template-columns:2.6rem 1fr auto}}

/* Pages intérieures */
.tete{background:linear-gradient(var(--kraft),var(--papier));border-bottom:1px solid var(--ligne);padding:4px 0 26px}
.tete__type{margin:1.2em 0 0;font:700 .8rem/1.2 var(--x);letter-spacing:.1em;text-transform:uppercase;color:var(--terre)}
@media (prefers-color-scheme:dark){.tete__type{color:#e08a52}}
.tete h1{font-size:clamp(1.85rem,4.4vw,2.8rem)}
.tete .chapo{color:var(--doux);font-style:italic}
.fil{font-size:.85rem;color:var(--doux);margin:16px 0 0}.fil a{color:var(--doux)}
.signature,.maj{color:var(--doux);font-size:.88rem;margin:0}.signature a{color:inherit}
.maj::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:14px;vertical-align:3px;opacity:.6}

/* Corps */
.art{padding-bottom:8px}
.accueil .art__t{margin-top:48px}
.accueil .art > .illu:first-of-type{display:none}
.art > .illu:first-of-type + p::first-letter{float:left;font:800 3.4em/.82 var(--t);color:var(--herbe);margin:.06em .1em 0 0}
@media (prefers-color-scheme:dark){.art > .illu:first-of-type + p::first-letter{color:#a5d98a}}
.aff{background:var(--aff);border:1px solid var(--aff-ligne);border-radius:6px;padding:9px 14px;font-size:.85rem;line-height:1.5;margin:1.2em 0}
.illu{margin:1.5em 0}.illu img{display:block;width:100%;max-height:min(56vw,420px);object-fit:cover;border-radius:6px}
.illu figcaption{font-size:.78rem;color:var(--doux);margin-top:.4rem;font-style:italic}
.encadre{position:relative;background:var(--kraft);border:1.5px dashed color-mix(in srgb,var(--terre) 55%,var(--ligne));border-radius:6px;padding:16px 18px 14px 20px;margin:1.6em 0}
.encadre::before{content:"";position:absolute;top:-9px;left:22px;width:16px;height:16px;border-radius:50%;background:var(--terre);box-shadow:0 2px 0 var(--terre-f)}
.encadre p{margin:.2em 0}
ul,ol{padding-left:1.3em}li{margin:.25em 0}
.art ul:not([class]) li::marker{color:var(--herbe-c)}
.petit{font-size:.82rem;color:var(--doux)}
.btn{display:inline-block;background:var(--terre);color:#fff;text-decoration:none;padding:12px 20px;border-radius:6px;font-weight:700}

/* Tableaux */
table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.3em 0;font-size:.93rem;-webkit-overflow-scrolling:touch;background:var(--carte);border-radius:6px}
thead th{font:700 .9rem/1.3 var(--t);color:var(--mousse);background:var(--herbe-p);border-bottom:3px solid var(--herbe);white-space:nowrap}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ligne)}
td{min-width:6.5em}tbody td:first-child{font-weight:700;min-width:8.5em}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--herbe-p) 45%,transparent)}
@media (min-width:1100px){.art > table{width:calc(100% + 140px);margin-left:-70px}}
@media (max-width:600px){table{font-size:.86rem}th,td{padding:8px 9px}}
.methode-lien{font-size:.82rem;margin:-.6em 0 1.2em}.methode-lien a{color:var(--doux)}

/* Sommaire, FAQ, suite */
.sommaire{background:var(--carte);border:1px solid var(--ligne);border-left:5px solid var(--herbe);border-radius:6px;padding:10px 16px;margin:1.2em 0}
.sommaire summary{font:700 1rem var(--t);color:var(--mousse)}.sommaire ol{margin:.5em 0 .2em;font-size:.95rem}
details{border-bottom:1px dashed var(--ligne);padding:13px 0}
summary{cursor:pointer;font:700 1.04rem/1.4 var(--t);color:var(--mousse);list-style:none;position:relative;padding-left:28px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--herbe-c);border-radius:0 70% 0 70%;transition:transform .2s}
details[open]>summary::before{transform:rotate(90deg)}
.faq{margin-top:2.6em}
.suite{margin-top:2.6em}
.cartes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cartes a{display:block;height:100%;background:var(--carte);border:1px solid var(--ligne);border-radius:6px;padding:16px;text-decoration:none;color:var(--texte);box-shadow:0 2px 0 var(--ligne)}
.cartes a:hover{border-color:var(--herbe-c)}
.cartes strong{font-family:var(--t);color:var(--mousse)}.cartes span{display:block;color:var(--doux);font-size:.9rem;margin-top:4px}

/* Outils */
.outil{background:var(--carte);border:1px solid var(--ligne);border-top:8px solid var(--herbe);border-radius:6px 6px 14px 14px;padding:20px 18px;margin:1.5em 0;box-shadow:var(--ombre)}
.outil label{display:block;font:700 .97rem/1.3 var(--t);color:var(--mousse);margin:.95em 0 .3em}
.outil select,.outil input{width:100%;min-height:48px;padding:10px 12px;font:600 1rem var(--x);color:var(--texte);background:var(--papier);border:1.5px solid var(--ligne);border-bottom:3px solid var(--herbe-c);border-radius:6px}
.outil select:focus,.outil input:focus{outline:none;border-color:var(--herbe);box-shadow:0 0 0 3px color-mix(in srgb,var(--herbe-c) 30%,transparent)}
.outil input[type=checkbox]{min-height:0;width:20px!important;height:20px;accent-color:var(--herbe);margin:2px 4px 0 0;flex:none}
.outil label:has(input[type=checkbox]){font:600 .95rem/1.45 var(--x);color:var(--texte);display:flex;gap:6px;align-items:flex-start;background:var(--herbe-p);padding:10px 12px;border-radius:6px}
.res{margin-top:1.2em;padding:14px 14px;background:var(--herbe-p);border-radius:8px;font-size:1.02rem}
.res:empty{display:none}.res table{background:var(--carte)}
.gros{font:800 1.9rem/1.1 var(--t);color:var(--herbe)}
@media (prefers-color-scheme:dark){.gros{color:#a5d98a}}
@media (max-width:600px){.outil{padding:16px 12px}.res{padding:12px 10px}}

/* Calendrier en barres : brins d'herbe */
.mois{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:160px;margin-top:12px}
.mois div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.mois span{display:block;width:100%;background:linear-gradient(var(--herbe-c),var(--herbe));border-radius:10px 10px 0 0;min-height:2px}
.mois small{font-size:.65rem;color:var(--doux);margin-top:2px}.mois em{font-style:normal;font-size:.6rem;color:var(--doux)}

/* Blocs de conversion */
.selection{background:var(--carte);border:1px solid var(--ligne);border-top:10px solid transparent;border-image:repeating-linear-gradient(100deg,#3b7531 0 30px,#468a3a 30px 60px) 10 0 0 0;border-radius:0 0 14px 14px;padding:18px 16px 16px;margin:1.2em 0 1.6em;box-shadow:var(--ombre)}
.selection__sur{margin:0;font:700 .76rem/1 var(--x);letter-spacing:.1em;text-transform:uppercase;color:var(--terre)}
.selection__titre{margin:.3em 0 .2em;font-size:1.45rem}.selection__intro{margin:0 0 1em;color:var(--doux);font-size:.95rem}
.selection__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.selection .petit{margin:.9em 0 0}
.prod{display:flex;flex-direction:column;min-width:0;background:var(--carte);border:1px solid var(--ligne);border-radius:6px;padding:16px;margin:1.2em 0}
.selection .prod{margin:0;background:var(--papier)}.prod--un{border:2px solid var(--terre)}
.prod__badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:0 0 .6em;font:700 .8rem/1.2 var(--x);color:var(--mousse)}
.prod__rang{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px dashed var(--terre);color:var(--terre);font:800 .95rem var(--t)}
.prod__img{display:block;width:100%;max-height:180px;object-fit:contain;margin:0 0 .6em}
.prod__nom{margin:0 0 .3em;font:700 1.12rem/1.3 var(--t);color:var(--mousse)}
.prod__pourquoi{margin:0 0 .6em;font-size:.93rem}
.prod__caracs{list-style:none;margin:0 0 .7em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:.85rem;border-top:1px dashed var(--ligne);padding-top:8px}
.prod__caracs li{display:flex;flex-direction:column;min-width:0;margin:0}.prod__caracs span{color:var(--doux);font-size:.76rem}.prod__caracs strong{overflow-wrap:anywhere}
.prod__pm{display:grid;gap:4px;margin:0 0 .7em;font-size:.88rem}.prod__pm ul{list-style:none;margin:0;padding:0}
.prod__pm li{position:relative;padding-left:1.4em;margin:.15em 0}.prod__pm li::before{position:absolute;left:0;font-weight:800}
.prod__plus li::before{content:"+";color:#2f7a2a}.prod__moins li::before{content:"\2212";color:#b3261e}
@media (prefers-color-scheme:dark){.prod__plus li::before{color:#8fd47a}.prod__moins li::before{color:#ff8a80}}
.prod__achat{margin-top:auto}
.prod__prix{margin:0 0 .6em;line-height:1.3}.prod__prix strong{font:800 1.45rem var(--t);color:var(--mousse)}.prod__prix s{color:var(--doux);margin-left:.3em}
.prod__prix span{display:block;color:var(--doux);font-size:.76rem}
.cta{display:block;background:var(--terre);color:#fff;text-align:center;text-decoration:none;font:700 1.03rem/1.25 var(--x);padding:14px 16px;border-radius:6px;min-height:50px;box-shadow:0 3px 0 var(--terre-f)}
.cta::after{content:" \2192"}.cta:hover,.cta:focus-visible{background:#9c4814;color:#fff}
.cta--petit,.cta--tab{display:inline-block;font-size:.88rem;padding:9px 13px;min-height:0;white-space:nowrap}
.cta--tab{font-size:.82rem;padding:6px 10px}
.verdict{background:var(--kraft);border-radius:6px;padding:6px 18px 16px;margin:2.2em 0 1em;border-left:6px solid var(--herbe)}
.verdict h2{margin-top:.6em}.verdict h2::before{display:none}.verdict__liste{list-style:none;margin:0;padding:0}
.verdict__liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px dashed var(--ligne)}
.collant{display:none}
@media (max-width:760px){
.collant.vu{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--carte);border-top:4px solid var(--herbe);box-shadow:0 -6px 18px rgba(0,0,0,.15);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.collant__txt{flex:1;min-width:0;line-height:1.25}.collant__txt strong,.collant__txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collant__txt strong{font:700 .92rem var(--t);color:var(--mousse)}.collant__txt span{font-size:.78rem;color:var(--doux)}
.cta--collant{flex:none;font-size:.95rem;padding:11px 14px;min-height:44px}
.collant__x{flex:none;background:none;border:0;color:var(--doux);font-size:1.4rem;line-height:1;padding:6px;cursor:pointer}
body.a-collant{padding-bottom:80px}}

/* Pied : la terre sous l'herbe */
.pied{margin-top:80px;color:#d9dcc9}
.pied__herbe{height:24px;background:url(/herbe.svg) 0 0/120px 24px repeat-x}
.pied__fond{background:#1d2b1a;padding:26px 0 36px}
.pied__g{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding-bottom:18px;border-bottom:1px dashed rgba(255,255,255,.2)}
.pied__logo{font:800 1.6rem/1 var(--t);color:#f6f1e3;margin:0 0 .4em}
.pied__nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.pied a{color:#f6f1e3}.pied__nav a{text-decoration:none;font-weight:600}.pied__nav a:hover{text-decoration:underline}
.pied__bas{padding-top:14px;font-size:.9rem}.pied__liens a{white-space:nowrap}
.pied .petit{color:#a9b39a}
@media (max-width:700px){.pied__g{grid-template-columns:1fr}}