/* PlanteVerte (27/10/2026) — magazine du jardinage. Même famille que piantaverde.it : vert bois, or, crème ; Playfair Display + Lora + Montserrat. */
:root { --vert: #2f5a3d; --bois: #1f3d2a; --or: #c9a44a; --or2: #e9d9a6; --creme: #f7f3ea; --papier: #fffdf8; --encre: #1f2a22; --gris: #5b6158; --ligne: #e3dccb; --clair: #3c9a4e; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 18px/1.65 'Lora', Georgia, serif; }
a { color: var(--vert); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.15; color: var(--bois); margin: 0 0 .4em; }
h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 900; }
h2 { font-size: clamp(25px, 3.4vw, 34px); }
h3 { font-size: 21px; }
.cadre { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.rub { display: inline-block; font: 800 12px/1 'Montserrat', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--or); margin-bottom: 8px; }
.meta { font: 600 13px/1.4 'Montserrat', sans-serif; color: var(--gris); }
.chapeau { font-size: 20px; color: #3a4236; max-width: 760px; }
.petit { font-size: 14px; color: var(--gris); }
.bouton { display: inline-block; background: var(--bois); color: #fff; text-decoration: none; font: 800 15px/1 'Montserrat', sans-serif; padding: 15px 22px; border-radius: 999px; margin: 6px 6px 0 0; }
.bouton.clair { background: #fff; color: var(--bois); }
.bouton.contour { background: transparent; color: var(--bois); box-shadow: inset 0 0 0 2px var(--bois); }
/* tête */
.filet-haut { background: var(--bois); color: var(--or2); font: 700 12.5px/1 'Montserrat', sans-serif; letter-spacing: .6px; }
.filet-haut .cadre { display: flex; justify-content: space-between; gap: 10px; padding-top: 9px; padding-bottom: 9px; }
.filet-haut a { color: #fff; text-decoration: none; }
.tete { background: #fff; border-bottom: 1px solid var(--ligne); }
.tete .cadre { text-align: center; padding-top: 22px; padding-bottom: 10px; }
.logo img { height: 74px; width: auto; margin: 0 auto; }
.bande-in img, .page-img { height: auto; }
.devise { margin: 6px 0 0; font: italic 400 16px/1.4 'Lora', serif; color: var(--gris); }
.menu { border-top: 1px solid var(--ligne); background: #fff; position: sticky; top: 0; z-index: 5; }
.menu .cadre { display: flex; gap: 6px; overflow-x: auto; justify-content: center; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.menu a { white-space: nowrap; text-decoration: none; color: var(--bois); font: 700 14px/1 'Montserrat', sans-serif; padding: 10px 12px; border-radius: 999px; }
.menu a:hover { background: #ece4d0; }
.menu a.vert { background: var(--vert); color: #fff; } .menu a.or { background: var(--or); color: #1d1608; }
@media (max-width: 760px) { .menu .cadre { justify-content: flex-start; } .logo img { height: 52px; } .filet-haut .droite { display: none; } }
/* cartes et grilles */
.carte { display: block; text-decoration: none; color: inherit; }
.carte img { border-radius: 14px; aspect-ratio: 960 / 536; object-fit: cover; width: 100%; height: auto; margin-bottom: 12px; background: #e9e2cf; }
.carte h3 { font-size: 21px; margin-bottom: 6px; }
.carte:hover h3 { color: var(--vert); text-decoration: underline; text-decoration-thickness: 1px; }
.carte.grande h3 { font-size: clamp(28px, 3.6vw, 40px); }
.carte.grande p { color: #3a4236; margin: 0 0 8px; }
.grille { display: grid; gap: 28px 26px; }
.grille.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grille.trois { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grille.trois { grid-template-columns: 1fr; } }
.une-bloc { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; padding-top: 34px; padding-bottom: 20px; }
.une-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.une-cote .carte h3 { font-size: 17px; } .une-cote .carte img { margin-bottom: 8px; }
@media (max-width: 860px) { .une-bloc { grid-template-columns: 1fr; } }
.section { padding-top: 34px; padding-bottom: 20px; }
.section-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 3px solid var(--bois); padding-top: 12px; margin-bottom: 20px; }
.section-tete h2 { margin: 0; }
.section-tete a { font: 700 14px/1 'Montserrat', sans-serif; text-decoration: none; white-space: nowrap; }
/* bandes app et académie */
.bande { margin: 34px 0; padding: 40px 0; }
.bande.vert { background: var(--bois); color: #e9efe6; }
.bande.vert h2, .bande.vert .sur { color: #fff; }
.bande.or { background: linear-gradient(135deg, #f3e7c4, #e9d39a); }
.bande .sur { font: 800 13px/1 'Montserrat', sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bois); margin: 0 0 10px; }
.bande-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: center; }
.bande-in img { border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
@media (max-width: 760px) { .bande-in { grid-template-columns: 1fr; } }
.qui { background: var(--creme); border-radius: 22px; padding-top: 30px; padding-bottom: 30px; margin-top: 30px; margin-bottom: 40px; }
.qui p { max-width: 820px; }
/* article */
.article { max-width: 820px; padding-top: 26px; padding-bottom: 40px; }
.fil { font: 600 13px/1.4 'Montserrat', sans-serif; color: var(--gris); margin-bottom: 14px; } .fil a { text-decoration: none; }
.article .une { border-radius: 16px; margin: 18px 0 26px; width: 100%; height: auto; aspect-ratio: 960 / 536; object-fit: cover; }
.texte h2 { font-size: 27px; margin-top: 1.4em; }
.texte p { margin: 0 0 1em; }
.liste { padding-left: 1.2em; } .liste li { margin-bottom: .5em; }
.encadre { border-radius: 14px; padding: 14px 18px; margin: 1.2em 0; }
.encadre b { font-family: 'Montserrat', sans-serif; font-size: 14px; } .encadre p { margin: 4px 0 0; }
.encadre.conseil { background: #eef5ec; border-left: 5px solid var(--clair); }
.encadre.attention { background: #fdf2e3; border-left: 5px solid #d9902b; }
.carres { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.3em 0; }
.carre { background: var(--creme); border-radius: 14px; padding: 16px 18px; margin: 0; font-size: 16.5px; }
.carre b { font: 700 14px/1.3 'Montserrat', sans-serif; display: block; margin-bottom: 6px; } .carre p { margin: 0; }
.carre.citation { font: italic 600 20px/1.4 'Playfair Display', serif; color: var(--bois); background: #f1ead6; }
.carre.errore { background: #fbeeee; }
@media (max-width: 560px) { .carres { grid-template-columns: 1fr; } }
.encadre-app { display: flex; gap: 16px; align-items: center; background: var(--bois); color: #e9efe6; border-radius: 18px; padding: 18px; margin: 30px 0; }
.encadre-app img { width: 64px; height: 64px; border-radius: 14px; background: #fff; flex: 0 0 auto; }
.encadre-app b { color: #fff; font-family: 'Montserrat', sans-serif; } .encadre-app p { margin: 4px 0 6px; font-size: 16px; } .encadre-app a { color: var(--or2); font: 800 14px 'Montserrat', sans-serif; }
.lire-aussi { margin-top: 30px; border-top: 3px solid var(--bois); padding-top: 14px; }
.lire-aussi .carte h3 { font-size: 18px; }
/* rubriques et pages */
.rubrique { padding-top: 30px; padding-bottom: 40px; }
.rubrique .grille { margin-top: 24px; }
.page { padding-top: 34px; padding-bottom: 50px; }
.page.etroit { max-width: 820px; }
.page.deux { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.page-img { border-radius: 20px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
@media (max-width: 800px) { .page.deux { grid-template-columns: 1fr; } }
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 30px; }
.contact { display: block; text-decoration: none; color: var(--bois); background: var(--creme); border: 1px solid var(--ligne); border-radius: 18px; padding: 20px; }
.contact span { font-size: 30px; display: block; } .contact b { font: 800 17px 'Montserrat', sans-serif; display: block; margin: 6px 0 2px; } .contact small { color: var(--gris); font-size: 15px; }
@media (max-width: 560px) { .contacts { grid-template-columns: 1fr; } }
/* pied */
.pied { background: var(--bois); color: #cfd9cb; margin-top: 20px; padding: 40px 0 20px; font-size: 15px; }
.pied .cadre { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; }
.pied b { display: block; color: #fff; font: 800 13px/1 'Montserrat', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 12px; }
.pied a, .pied span { display: block; color: #cfd9cb; text-decoration: none; margin-bottom: 7px; }
.pied-logo { background: #fff; border-radius: 10px; padding: 8px 12px; height: 56px; width: auto; margin-bottom: 10px; }
.pied-bas { text-align: center; font-size: 13px; color: #9fb19a; margin: 26px 0 0; }
@media (max-width: 760px) { .pied .cadre { grid-template-columns: 1fr 1fr; } }
.wa { position: fixed; right: 16px; bottom: 16px; background: #25d366; color: #fff; text-decoration: none; font: 800 15px 'Montserrat', sans-serif; padding: 12px 16px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); z-index: 9; }
@media (max-width: 560px) { .wa span { display: none; } }