/* Un goji au jardin : le site est un sachet de graines. Recto = la photo dans la fenêtre du sachet et la fiche technique,
   verso = le calendrier en 12 cases et le mode d'emploi en coupons. Navigation en tickets perforés. */
@font-face { font-family: "Bricolage Grotesque"; src: url("polices/bricolage-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("polices/bricolage-normal-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("polices/atkinson-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("polices/atkinson-normal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("polices/atkinson-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root { --vert: #1f5e3b; --vert-2: #2f7a4f; --fond: #dcebdd; --goji: #e4572e; --goji-fonce: #b83c17; --soleil: #f6c445; --encre: #13261a; --blanc: #fff; --gris: #4f6155; --pointille: #b7cbbb; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); font: 400 17px/1.6 "Atkinson Hyperlegible", system-ui, sans-serif; overflow-wrap: break-word;
  background: var(--fond) radial-gradient(circle, rgba(31,94,59,.10) 1.2px, transparent 1.3px) 0 0 / 18px 18px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-underline-offset: 2px; }
a:hover { color: var(--goji-fonce); }
.boite { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.saut { position: absolute; left: -999px; top: 0; background: var(--soleil); color: var(--encre); padding: 8px 12px; z-index: 5; }
.saut:focus { left: 8px; top: 8px; }

/* Bandeau : nom + tickets perforés */
.bandeau { padding: 18px 0 10px; }
.bandeau .boite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.marque { font: 800 1.35rem/1 "Bricolage Grotesque", sans-serif; color: var(--vert); text-decoration: none; letter-spacing: -.01em; }
.marque span { color: var(--goji); }
.tickets { display: flex; flex-wrap: wrap; gap: 8px; }
.tickets a { text-decoration: none; color: var(--encre); background: var(--blanc); font: 700 .86rem/1 "Atkinson Hyperlegible", sans-serif; padding: 10px 14px 10px 12px;
  border: 2px dashed var(--vert); border-radius: 4px; display: inline-flex; gap: 8px; align-items: center; }
.tickets a b { background: var(--vert); color: var(--blanc); border-radius: 50%; width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: .75rem; }
.tickets a[aria-current] { background: var(--soleil); }
.tickets a:hover { background: #fff6da; color: var(--encre); }

/* Recto : le sachet à gauche, la fiche technique à droite */
.recto { display: grid; grid-template-columns: minmax(0, 470px) 1fr; gap: 40px; align-items: center; padding: 26px 0 50px; }
.sachet { background: var(--blanc); border-radius: 6px; box-shadow: 0 18px 40px rgba(19,38,26,.18); overflow: hidden; position: relative; }
.sachet::before { content: ""; display: block; height: 26px; background: repeating-linear-gradient(90deg, var(--vert) 0 14px, var(--vert-2) 14px 28px); }
.fenetre { position: relative; aspect-ratio: 4 / 5; background: #0d2416 url("../photos/b-baies-gros-plan.jpg") center / cover no-repeat; }
.fenetre h1 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 22px 20px; color: var(--blanc);
  font: 800 clamp(2.3rem, 6vw, 3.6rem)/.95 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; background: linear-gradient(transparent, rgba(10,30,18,.88)); }
.fenetre h1 small { display: block; font: italic 400 1rem/1.3 "Atkinson Hyperlegible", sans-serif; letter-spacing: 0; margin-top: 10px; opacity: .95; }
.sachet .bas { padding: 14px 22px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; font-size: .86rem; color: var(--gris); border-top: 2px dashed #c6d6c9; }
.fiche h2 { font: 800 1.8rem/1.1 "Bricolage Grotesque", sans-serif; margin: 0 0 8px; color: var(--vert); }
.fiche > p { max-width: 560px; margin: 0 0 14px; }
.pictos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.picto { background: var(--blanc); border-radius: 10px; padding: 14px 14px 12px; border: 2px solid var(--encre); }
.picto i { font-style: normal; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soleil); font: 800 1rem "Bricolage Grotesque", sans-serif; margin-bottom: 8px; }
.picto:nth-child(2n) i { background: var(--fond); } .picto:nth-child(3n) i { background: #f6d2c7; }
.picto b { display: block; font: 800 1.05rem/1.2 "Bricolage Grotesque", sans-serif; }
.picto span { font-size: .85rem; color: var(--gris); }

/* Verso : calendrier 12 cases */
.verso { background: var(--blanc); border-radius: 6px; padding: 28px clamp(16px, 3vw, 34px) 30px; box-shadow: 0 10px 30px rgba(19,38,26,.12); }
.verso h2, .coupons h2, .vignettes h2, .presentoir h2, .nouveau h2 { font: 800 1.6rem/1.15 "Bricolage Grotesque", sans-serif; margin: 0 0 6px; }
.verso > p { margin: 0 0 20px; color: var(--gris); }
.calendrier { display: grid; grid-template-columns: 120px repeat(12, 1fr); gap: 4px; font-size: .82rem; }
.calendrier .m { text-align: center; font-weight: 700; color: var(--gris); padding-bottom: 4px; }
.calendrier .l { font-weight: 700; align-self: center; }
.calendrier .c { height: 30px; border-radius: 4px; background: #eef3ee; }
.calendrier .c.p { background: var(--vert-2); } .calendrier .c.t { background: #9db8a5; } .calendrier .c.f { background: #b48ad1; } .calendrier .c.r { background: var(--goji); }
.legende { margin: 14px 0 0; font-size: .88rem; color: var(--gris); }
.cles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .85rem; }
.cles li::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; background: var(--c); }

/* Coupons détachables */
.coupons { padding: 54px 0 10px; }
.coupons ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px dashed var(--encre); border-radius: 8px; background: var(--blanc); }
.coupons li { padding: 20px 18px 18px; border-left: 2px dashed var(--encre); position: relative; }
.coupons li:first-child { border-left: 0; }
.coupons li::before { content: "✂"; position: absolute; top: -14px; left: -10px; background: var(--fond); font-size: 1rem; padding: 0 3px; color: var(--encre); }
.coupons li:first-child::before { display: none; }
.coupons .num { font: 800 2.6rem/1 "Bricolage Grotesque", sans-serif; color: var(--goji); }
.coupons h3 { font: 800 1.15rem/1.2 "Bricolage Grotesque", sans-serif; margin: 8px 0 6px; }
.coupons p { font-size: .92rem; margin: 0 0 10px; }
.coupons a { font-weight: 700; }

/* Présentoir : toutes les fiches, comme des sachets alignés */
.presentoir { padding: 46px 0 10px; }
.presentoir > p { margin: 0 0 16px; color: var(--gris); }
.rayon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rayon li { background: var(--blanc); border-radius: 6px; overflow: hidden; box-shadow: 0 6px 16px rgba(19,38,26,.10); display: flex; flex-direction: column; }
.rayon li::before { content: ""; height: 12px; background: repeating-linear-gradient(90deg, var(--c, var(--vert)) 0 10px, transparent 10px 14px); }
.rayon a { display: block; padding: 14px 16px 16px; text-decoration: none; color: var(--encre); flex: 1; }
.rayon small { display: block; font: 700 .74rem/1 "Atkinson Hyperlegible", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.rayon b { display: block; font: 800 1.08rem/1.2 "Bricolage Grotesque", sans-serif; margin-bottom: 6px; }
.rayon span { font-size: .88rem; color: var(--gris); }
.rayon a:hover b { color: var(--goji-fonce); }

/* Vignettes carrées en bande */
.vignettes { padding: 46px 0 20px; }
.bande { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 0; }
.bande figure { margin: 0; position: relative; }
.bande img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; width: 100%; }
.bande figcaption { position: absolute; left: 8px; bottom: 8px; right: 8px; background: rgba(255,255,255,.94); border-radius: 4px; padding: 5px 8px; font-size: .8rem; font-weight: 700; }

.nouveau { padding: 40px 0 0; }
.nouveau ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.nouveau a { display: block; background: var(--blanc); border: 2px dashed var(--vert); border-radius: 6px; padding: 12px 16px; text-decoration: none; color: var(--encre); }
.nouveau b { display: block; font: 800 1.05rem/1.25 "Bricolage Grotesque", sans-serif; }
.nouveau span { font-size: .9rem; color: var(--gris); }

/* Pages intérieures : bandeau de titre sans photo, grandes étapes numérotées */
.tete { background: var(--vert); color: var(--blanc); padding: 40px 0 36px; margin-top: 8px; }
.tete .sur { font: 700 .82rem/1.2 "Atkinson Hyperlegible", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--soleil); margin: 0; }
.tete h1 { font: 800 clamp(2rem, 5vw, 3.3rem)/1.04 "Bricolage Grotesque", sans-serif; margin: 10px 0 12px; max-width: 860px; letter-spacing: -.015em; }
.tete p.chapo { max-width: 700px; margin: 0; opacity: .95; }
.tete .fil { font-size: .85rem; margin: 0 0 14px; opacity: .9; }
.tete .fil a { color: var(--blanc); }
.etapes { list-style: none; margin: 0; padding: 30px 0 10px; counter-reset: e; }
.etape { counter-increment: e; display: grid; grid-template-columns: 110px minmax(0, 1fr) 260px; gap: 26px; padding: 28px 0; border-bottom: 2px dashed var(--pointille); }
.etape.nu { grid-template-columns: 110px minmax(0, 1fr); }
.etape::before { content: counter(e, decimal-leading-zero); font: 800 4.4rem/0.9 "Bricolage Grotesque", sans-serif; color: var(--goji); }
.etape h2 { font: 800 1.45rem/1.15 "Bricolage Grotesque", sans-serif; margin: 0 0 10px; }
.etape p, .etape ul, .etape ol { margin: 0 0 12px; max-width: 660px; }
.etape li { margin-bottom: 6px; }
.etape aside { font-size: .9rem; }
.etape aside figure { margin: 0 0 14px; }
.etape aside img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.etape aside figcaption { margin-top: 6px; color: var(--gris); }
.etape aside .gravure img, .etape aside .trait img { aspect-ratio: auto; object-fit: contain; max-height: 340px; margin: 0 auto; }
.etape aside .gravure, .etape aside .trait { background: var(--blanc); border-radius: 8px; padding: 10px; border: 2px solid var(--encre); }
.trait img { mix-blend-mode: multiply; }
.memo { background: var(--soleil); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.memo p { margin: 0 0 6px; } .memo p:last-child { margin: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 36px 0 10px; }
.carte { background: var(--blanc); border-radius: 10px; padding: 22px 22px 18px; border-top: 8px solid var(--vert-2); }
.carte.non { border-top-color: var(--goji); }
.carte h2 { font: 800 1.35rem/1.15 "Bricolage Grotesque", sans-serif; margin: 0 0 10px; }
.carte ul { padding-left: 1.1em; margin: 0; } .carte li { margin-bottom: 8px; }
.texte { max-width: 780px; padding: 20px 0 10px; }
.texte h2 { font: 800 1.45rem/1.15 "Bricolage Grotesque", sans-serif; margin: 30px 0 10px; }
.texte h2::before { content: "✂ "; color: var(--goji); font-size: .9em; }
.texte figure { margin: 22px 0; }
.texte figure img { border-radius: 8px; max-height: 520px; width: auto; }
.texte figure.gravure { background: var(--blanc); border: 2px solid var(--encre); border-radius: 8px; padding: 12px; display: inline-block; }
.texte figure.gravure img { max-height: 460px; }
.texte figcaption { font-size: .88rem; color: var(--gris); margin-top: 6px; }
.texte .memo { margin: 18px 0; }
.rangee { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 26px 0 14px; }
.rangee.r2 { grid-template-columns: 3fr 2fr; }
.rangee figure { margin: 0; }
.rangee img { height: 280px; width: 100%; object-fit: cover; border-radius: 8px; }
.rangee figcaption { font-size: .84rem; color: var(--gris); margin-top: 4px; }
.tableau { overflow-x: auto; margin: 16px 0; }
.tableau table { border-collapse: collapse; background: var(--blanc); min-width: 100%; font-size: .93rem; }
.tableau th, .tableau td { border: 2px dashed var(--pointille); padding: 8px 10px; text-align: left; vertical-align: top; }
.tableau th { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.sources { font-size: .88rem; color: var(--gris); margin: 30px 0 0; padding: 14px 16px; border-left: 4px solid var(--vert-2); background: rgba(255,255,255,.55); }
.sources p { margin: 0 0 6px; font-weight: 700; color: var(--encre); }
.sources ul { margin: 0; padding-left: 1.1em; }
.mot-fin { font-size: .9rem; color: var(--gris); margin: 18px 0 0; }
.suite-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 0 0; }
.suite-nav a { flex: 1 1 260px; text-decoration: none; color: var(--encre); background: var(--blanc); border: 2px dashed var(--vert); border-radius: 6px; padding: 12px 16px; font: 800 1.02rem/1.25 "Bricolage Grotesque", sans-serif; }
.suite-nav a small { display: block; font: 700 .76rem/1.2 "Atkinson Hyperlegible", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin-bottom: 4px; }
.suite-nav a.d { text-align: right; }
.liste-404 { columns: 2; gap: 30px; padding-left: 1.1em; }
.liste-404 li { margin-bottom: 8px; }

.pied { margin-top: 56px; border-top: 3px dashed var(--vert); padding: 26px 0 36px; font-size: .9rem; color: var(--gris); }
.pied .grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px 34px; }
.pied b { display: block; color: var(--encre); margin-bottom: 6px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 4px; }
.pied .bas { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 14px; border-top: 2px dashed var(--pointille); }
.pied .marque { font-size: 1.15rem; display: inline-block; margin-bottom: 8px; }

@media (max-width: 900px) {
  .recto { grid-template-columns: 1fr; }
  .pictos { grid-template-columns: repeat(2, 1fr); }
  .coupons ol { grid-template-columns: 1fr 1fr; }
  .coupons li:nth-child(3) { border-left: 0; }
  .coupons li:nth-child(n+3) { border-top: 2px dashed var(--encre); }
  .rayon { grid-template-columns: 1fr 1fr; }
  .bande { grid-template-columns: 1fr 1fr; }
  .etape, .etape.nu { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .etape::before { font-size: 3rem; }
  .etape aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: start; }
  .deux { grid-template-columns: 1fr; }
  .rangee, .rangee.r2 { grid-template-columns: 1fr 1fr; } .rangee figure:first-child { grid-column: 1 / -1; }
  .rangee img { height: 220px; }
  .calendrier { grid-template-columns: 70px repeat(12, minmax(0, 1fr)); gap: 2px; font-size: .68rem; }
  .calendrier .c { height: 22px; }
  .pied .grille { grid-template-columns: 1fr 1fr; } .pied .grille > div:first-child { grid-column: 1 / -1; }
  .liste-404 { columns: 1; }
}
@media (max-width: 520px) {
  .coupons ol { grid-template-columns: 1fr; }
  .coupons li { border-left: 0; border-top: 2px dashed var(--encre); } .coupons li:first-child { border-top: 0; }
  .coupons li::before { display: none; }
  .rayon { grid-template-columns: 1fr; }
  .tickets a { font-size: .8rem; padding: 8px 10px; }
  .pictos { gap: 8px; } .picto { padding: 10px; }
  .pied .grille { grid-template-columns: 1fr; }
}