/* Les Légumes Charbonneau — feuille de style
   Direction : les couleurs du polo de la ferme (vert forêt, or maïs) et une enseigne de bord de route
   en guise d'accueil. Titres en Alfa Slab One (lettrage du logo brodé), texte en Figtree. */
@font-face { font-family: "Alfa Slab One"; src: url("../fonts/alfa-slab.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --green: #1F5B33;        /* polo de la ferme */
  --green-2: #174527;      /* vert plus profond, bandes */
  --green-ink: #1A4A2B;    /* texte vert sur clair */
  --gold: #FDC804;         /* jaune exact du logo de la ferme */
  --gold-soft: #FEDF66;    /* même jaune, plus pâle (survol) */
  --field: #F1F4EA;        /* fond : vert très pâle */
  --field-2: #E4EAD8;
  --ink: #15281B;
  --muted: #4D5E52;
  --rule: #CBD5BD;
  --tomato: #C8372D;
  --pumpkin: #E57A21;
  --white: #FFFFFF;

  --f-slab: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --f-sans: "Figtree", "Segoe UI", system-ui, sans-serif;

  --s--1: 0.875rem;
  --s-0: 1.0625rem;
  --s-1: 1.3rem;
  --s-2: clamp(1.45rem, 1.15rem + 1vw, 1.85rem);
  --s-3: clamp(1.85rem, 1.3rem + 2vw, 2.7rem);
  --s-4: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem);

  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 70px;
  --r: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--field); color: var(--ink); font: 400 var(--s-0)/1.62 var(--f-sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--green-ink); text-underline-offset: 3px; }
a:hover { color: var(--green); }
p, figure, h1, h2, h3, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--f-slab); font-weight: 400; line-height: 1.08; letter-spacing: 0.002em; text-wrap: balance; }
h2 { font-size: var(--s-3); }
h3 { font-size: var(--s-1); line-height: 1.2; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: var(--ink); padding: 10px 14px; z-index: 50; border-radius: var(--r); font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- aperçu */
.preview-bar { background: var(--ink); color: #D9E3D2; font-size: .86rem; line-height: 1.45; padding: 9px var(--gutter); }
.preview-bar b { color: var(--gold); font-weight: 700; margin-right: 4px; }

/* ---------------------------------------------------------------- en-tête */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--green); color: var(--white); border-bottom: 3px solid var(--gold); }
.header-row { display: flex; align-items: center; gap: 22px; min-height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { width: 116px; height: auto; margin-block: 6px; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 4px; }
.main-nav a { display: block; padding: 8px 12px; color: var(--white); text-decoration: none; font-weight: 600; font-size: .98rem; border-radius: var(--r); }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: var(--gold-soft); }
.lang { color: var(--white); font-weight: 700; font-size: .9rem; text-decoration: none; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: var(--r); padding: 6px 10px; }
.lang:hover { border-color: var(--gold); color: var(--gold); }
.header-call { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--ink); text-decoration: none; font-weight: 800; padding: 10px 14px; border-radius: var(--r); white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-call:hover { background: var(--gold-soft); color: var(--ink); }
.header-call svg { width: 18px; height: 18px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid rgba(255, 255, 255, .5); color: var(--white); border-radius: var(--r); padding: 8px 12px; font-weight: 700; cursor: pointer; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .header-call { display: none; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--green-2); border-bottom: 3px solid var(--gold); display: none; }
  .nav-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; padding: 10px var(--gutter) 18px; }
  .main-nav a { padding: 12px 6px; font-size: 1.05rem; }
  .lang { order: 3; }
}

/* ---------------------------------------------------------------- boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; text-decoration: none; padding: 14px 22px; border-radius: var(--r); border: 0; cursor: pointer; line-height: 1.1; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); color: var(--ink); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-2); color: var(--white); }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* ---------------------------------------------------------------- accueil : l'enseigne */
.hero { background: var(--green); color: var(--white); position: relative; overflow: hidden; }
.hero::after { /* rangs de culture en fond */
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 28px);
  -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(44px, 7vw, 96px) clamp(64px, 8vw, 112px); position: relative; z-index: 1; }
.hero h1 { font-size: var(--s-4); color: var(--white); }
.hero .lead { margin-top: 22px; font-size: 1.18rem; line-height: 1.55; color: #DCE8DA; max-width: 34ch; }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-cta .btn-line { color: var(--white); }
.hero-where { margin-top: 22px; color: #C9D9C6; font-size: .98rem; display: flex; gap: 8px; align-items: flex-start; }
.hero-where svg { width: 18px; height: 18px; margin-top: 4px; flex: none; color: var(--gold); }

.sign { position: relative; background: var(--green-2); border: 6px solid var(--gold); border-radius: 4px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 2px var(--green-2), 0 24px 40px rgba(0, 0, 0, .28); }
.sign::before, .sign::after { /* poteaux */ content: ""; position: absolute; bottom: -120px; width: 14px; height: 120px; background: #6B4A2B; box-shadow: inset -4px 0 rgba(0,0,0,.2); }
.sign::before { left: 18%; } .sign::after { right: 18%; }
.sign-title { font-family: var(--f-slab); color: var(--gold); font-size: var(--s-2); line-height: 1.1; }
.sign-group + .sign-group { margin-top: 22px; padding-top: 20px; border-top: 2px dashed rgba(253, 200, 4, .45); }
.sign-group > p { color: var(--gold-soft); font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.sign ul { list-style: none; display: grid; gap: 10px; }
.sign li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; font-family: var(--f-slab); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.15; color: var(--white); }
.sign li a { color: inherit; text-decoration: none; }
.sign li a:hover { color: var(--gold-soft); text-decoration: underline; }
.sign li small { display: block; font-family: var(--f-sans); font-size: .88rem; font-weight: 500; color: #C2D3BF; margin-top: 3px; }
.sign .ill { width: 44px; height: 44px; }
.sign-call { margin-top: 24px; background: var(--gold); color: var(--ink); border-radius: 3px; padding: 12px 16px; font-weight: 700; line-height: 1.35; }
.sign-call a { color: var(--ink); font-family: var(--f-slab); font-weight: 400; font-size: 1.35rem; text-decoration: none; display: block; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sign { margin-bottom: 70px; }
  .sign::before, .sign::after { bottom: -76px; height: 76px; }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-alt { background: var(--white); }
.section-head { max-width: 46rem; }
.section-head .lead, .lead { margin-top: 16px; font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.band { background: var(--green); color: var(--white); }
.band h2 { color: var(--white); }
.band .lead { color: #D1E0CE; }

/* produits : rangées, pas des cartes */
.crops { list-style: none; margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--ink); }
.crop { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding-block: 26px; border-bottom: 1px solid var(--rule); }
.crop .ill { width: 108px; height: 108px; }
.crop h3 { font-size: var(--s-2); }
.crop p { margin-top: 8px; color: var(--muted); max-width: 58ch; }
.crop .tag { display: inline-block; margin-top: 10px; font-size: .86rem; font-weight: 700; color: var(--green-ink); background: var(--field-2); border-radius: 99px; padding: 4px 12px; }
.link-more { font-weight: 800; color: var(--green-ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.link-more:hover { border-color: var(--green); }
@media (max-width: 720px) {
  .crop { grid-template-columns: 76px minmax(0, 1fr); }
  .crop .ill { width: 72px; height: 72px; }
  .crop .link-more { grid-column: 2; justify-self: start; }
}

/* kiosque */
.kiosk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.kiosk .ill-big { width: min(100%, 360px); margin-inline: auto; }
.checks { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.checks svg { width: 22px; height: 22px; margin-top: 3px; color: var(--gold); }
.section-alt .checks svg, .section:not(.band) .checks svg { color: var(--green); }
@media (max-width: 860px) { .kiosk { grid-template-columns: 1fr; } .kiosk .ill-big { order: -1; width: 220px; } }

/* sur place */
.onsite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 2px solid var(--ink); }
.onsite > div { padding: 26px clamp(16px, 2.4vw, 30px) 8px 0; }
.onsite > div + div { padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--rule); }
.onsite .ill { width: 64px; height: 64px; margin-bottom: 14px; }
.onsite p { margin-top: 8px; color: var(--muted); }
@media (max-width: 760px) {
  .onsite { grid-template-columns: 1fr; }
  .onsite > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* calendrier */
.cal { overflow-x: auto; max-width: 100%; min-width: 0; }

.cal table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cal th, .cal td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--rule); }
.cal thead th { font-size: .9rem; color: var(--muted); font-weight: 700; text-align: center; }
.cal thead th:first-child { text-align: left; }
.cal tbody th { font-family: var(--f-slab); font-weight: 400; font-size: 1.1rem; white-space: nowrap; }
.cal tbody th span { display: block; font-family: var(--f-sans); font-size: .82rem; color: var(--muted); font-weight: 600; }
.cal td { text-align: center; }
.cal td.on::before { content: ""; display: block; height: 18px; border-radius: 99px; background: var(--c, var(--green)); }
.cal td.on[data-mode="kiosque"]::before { background: repeating-linear-gradient(45deg, var(--c), var(--c) 6px, color-mix(in srgb, var(--c) 70%, white) 6px 12px); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .9rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend i { width: 28px; height: 12px; border-radius: 99px; background: var(--green); }
.cal-legend i.k { background: repeating-linear-gradient(45deg, var(--green), var(--green) 6px, #6E9A7B 6px 12px); }
.note { margin-top: 18px; padding: 14px 16px; background: var(--white); border-left: 4px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; color: var(--ink); max-width: 64ch; }

/* pages intérieures */
.page-head { background: var(--green); color: var(--white); padding-block: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 72px); border-bottom: 3px solid var(--gold); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.page-head h1 { font-size: var(--s-4); color: var(--white); margin-top: 14px; }
.page-head .lead { color: #D1E0CE; max-width: 52ch; }
.page-head .ill { width: clamp(110px, 16vw, 180px); height: auto; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: #C2D3BF; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { color: #E6EFE3; }
@media (max-width: 640px) { .page-head-grid { grid-template-columns: 1fr; } .page-head .ill { width: 96px; order: -1; } }

.prose { max-width: 66ch; }
.prose h2 { font-size: var(--s-2); margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.aside-card { background: var(--white); border-top: 6px solid var(--gold); padding: 24px; border-radius: 0 0 var(--r) var(--r); position: sticky; top: calc(var(--header-h) + 20px); }
.aside-card h2 { font-size: 1.35rem; }
.aside-card dl { margin-top: 14px; display: grid; gap: 12px; }
.aside-card dt { font-size: .85rem; color: var(--muted); font-weight: 700; }
.aside-card dd { font-weight: 600; }
.aside-card .btn { margin-top: 20px; width: 100%; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .aside-card { position: static; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 2px solid var(--ink); }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; font-size: 1.08rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 1.6rem/1 var(--f-slab); color: var(--green); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 62ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* visite / contact */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.visit-list { list-style: none; margin-top: 26px; display: grid; gap: 18px; }
.visit-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.visit-list svg { width: 24px; height: 24px; color: var(--gold); margin-top: 2px; }
.visit-list strong { display: block; color: var(--white); }
.visit-list span, .visit-list a { color: #D1E0CE; }
.big-tel { font-family: var(--f-slab); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); color: var(--gold) !important; text-decoration: none; font-variant-numeric: tabular-nums; }
.map-embed { margin-top: 26px; }
.map-embed button { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); border-radius: var(--r); padding: 12px 18px; font-weight: 700; cursor: pointer; }
.map-embed button:hover { border-color: var(--gold); color: var(--gold); }
.map-embed small { display: block; margin-top: 8px; color: #A9BFA6; font-size: .82rem; }
.map-embed iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r); }

.form-card { background: var(--white); color: var(--ink); padding: clamp(22px, 3vw, 36px); border-radius: var(--r); border-top: 6px solid var(--gold); }
.form-card h3 { font-size: var(--s-2); }
.form-card > p { margin-top: 8px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .95rem; }
.field small { font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { border: 1.5px solid #B9C5AE; border-radius: var(--r); padding: 12px 14px; background: var(--white); width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--green); }
.hp { position: absolute; left: -9999px; }
.form-foot { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-foot p { font-size: .86rem; color: var(--muted); flex: 1 1 240px; }
.form-status { margin-top: 14px; font-weight: 700; }
.form-status.is-ok { color: var(--green-ink); }
.form-status.is-err { color: var(--tomato); }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

/* bande d'appel */
.cta-band { background: var(--gold); color: var(--ink); padding-block: clamp(36px, 5vw, 56px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cta-band h2 { font-size: var(--s-3); max-width: 22ch; }
.cta-band p { margin-top: 8px; max-width: 52ch; }

/* liens croisés */
.more-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 2px solid var(--ink); margin-top: 24px; }
.more-links a { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 18px 16px 18px 0; text-decoration: none; color: var(--ink); font-family: var(--f-slab); font-size: 1.1rem; border-bottom: 1px solid var(--rule); }
.more-links a:hover { color: var(--green); }
.more-links .ill { width: 48px; height: 48px; }

/* pied de page */
.site-footer { background: var(--green-2); color: #CFDDCB; padding-block: 56px 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; }
.footer-brand img { width: 150px; }
.footer-brand p { margin-top: 14px; max-width: 30ch; }
.site-footer h2 { font-family: var(--f-sans); font-weight: 800; font-size: .95rem; color: var(--gold); margin-bottom: 12px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a { color: #E6EFE3; }
.site-footer a:hover { color: var(--gold); }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: .86rem; }
.footer-credit { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.footer-credit img { width: 92px; height: auto; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* barre d'appel mobile */
.mobile-call { display: none; }
@media (max-width: 960px) {
  .mobile-call { display: grid; grid-template-columns: 1fr auto; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--green-2); border-top: 3px solid var(--gold); }
  .mobile-call .btn { padding: 13px 14px; }
  body { padding-bottom: 78px; }
}

/* 404 / merci */
.simple { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.simple .ill { width: 120px; margin: 0 auto 24px; }
.simple p { margin: 14px auto 26px; color: var(--muted); max-width: 46ch; }

/* mouvement : un seul moment, l'enseigne qui se pose à l'arrivée */
@media (prefers-reduced-motion: no-preference) {
  .js .sign { animation: sign-in .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
  @keyframes sign-in { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- photos de la ferme */
.photo-strip { background: var(--green); padding: 0 0 clamp(36px, 5vw, 64px); }
.strip-grid { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: clamp(10px, 1.6vw, 18px); }
.strip-grid figure { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--green-2); }
.strip-grid figure:last-child { aspect-ratio: auto; }
.strip-grid picture, .strip-grid img { width: 100%; height: 100%; object-fit: cover; }
.strip-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: var(--white); font-weight: 700; font-size: .95rem; background: linear-gradient(transparent, rgba(10, 30, 16, .78)); }
@media (max-width: 760px) {
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .strip-grid figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
.crop-photo { display: block; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--gold); }
.crop-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .crop-photo { width: 76px; height: 76px; border-width: 3px; } }
.kiosk-photo { justify-self: center; width: min(100%, 420px); border: 6px solid var(--gold); border-radius: 4px; overflow: hidden; transform: rotate(1.5deg); box-shadow: 0 20px 36px rgba(0, 0, 0, .3); }
.kiosk-photo img { width: 100%; height: auto; }
@media (max-width: 860px) { .kiosk-photo { order: -1; width: min(100%, 320px); } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
.pair picture { display: block; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--field-2); }
.pair img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- abonnés et note Google */
.social-band { background: var(--gold); color: var(--ink); padding-block: clamp(32px, 4.5vw, 56px); }
.social-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px clamp(24px, 4vw, 56px); align-items: center; }
.social-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.social-num { display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; justify-content: start; line-height: 1; padding-inline: clamp(18px, 3vw, 44px); border-left: 2px solid rgba(23, 69, 39, .25); }
.social-num:first-child { padding-left: 0; border-left: 0; }
.social-logo, .social-star { grid-row: span 2; align-self: center; }
.social-logo { display: block; width: clamp(36px, 2.4vw + 18px, 52px); aspect-ratio: 1; background: var(--green-2);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.social-logo--ig { --m: url("../brand/instagram-glyph-mono.svg"); }
.social-logo--fb { --m: url("../brand/facebook-logo-mono.png"); }
.social-star { font-size: clamp(38px, 2.6vw + 18px, 56px); color: var(--green-2); }
.social-num strong { font-family: var(--f-slab); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); letter-spacing: -0.01em; color: var(--green-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.social-num strong small { font-size: .42em; margin-left: 2px; }
.social-num .lbl { margin-top: 8px; font-weight: 800; font-size: 1.02rem; }
.social-txt { max-width: 58ch; font-size: 1.05rem; }
.social-cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.social-cta .btn-line { color: var(--green-2); }
.social-reviews { font-weight: 700; color: var(--green-2); }
@media (max-width: 1080px) { .social-row { grid-template-columns: 1fr; } .social-num strong { font-size: clamp(2.2rem, 0.6rem + 4.6vw, 3.6rem); } .social-num { padding-inline: 18px; } .social-num:first-child { padding-left: 0; } }
@media (max-width: 760px) {
  .social-nums { grid-template-columns: 1fr; }
  .social-num { padding: 14px 0; border-left: 0; border-top: 2px solid rgba(23, 69, 39, .2); grid-template-columns: 44px auto; }
  .social-num:first-child { border-top: 0; padding-top: 0; }
  .social-num strong { font-size: 2.3rem; }
  .social-logo { width: 34px; }
  .social-star { font-size: 38px; }
  .social-num .lbl { margin-top: 4px; font-size: .95rem; }
}

/* ---------------------------------------------------------------- carrousel des vidéos */
.reels { background: var(--green-2); color: var(--white); overflow: hidden; }
.reels h2 { color: var(--white); }
.reels .lead { color: #CFDDCB; }
.reels-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.reels-nav { display: flex; gap: 10px; }
.reels-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; color: var(--gold); font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.reels-btn:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.reels-btn:disabled { opacity: .35; cursor: default; }
.reels-track { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 28px max(var(--gutter), calc((100% - var(--max)) / 2)) 26px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scrollbar-width: none; }
.reels-track::-webkit-scrollbar { display: none; }
.reel { flex: 0 0 clamp(200px, 21vw, 260px); scroll-snap-align: start; }
.reel a { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 9 / 16; border: 3px solid transparent; background: var(--green); }
.reel a:hover, .reel a:focus-visible { border-color: var(--gold); }
.reel picture, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-play { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 3px var(--gold), 0 6px 18px rgba(0, 0, 0, .35); }
.reel-play::after { content: ""; position: absolute; inset: 30% 26% 30% 38%; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.reels .link-more { color: var(--gold); border-color: var(--gold); }
@media (max-width: 600px) { .reel { flex-basis: 64vw; } }

/* calendrier : tient dans un écran de cellulaire (après les règles de base pour les remplacer) */
@media (max-width: 640px) {
  .cal table { min-width: 0; table-layout: fixed; }
  .cal thead th:first-child { width: 34%; }
  .cal th, .cal td { padding: 10px 3px; }
  .cal thead th { font-size: .78rem; }
  .cal tbody th { font-size: .95rem; white-space: normal; }
  .cal tbody th span { font-size: .72rem; }
  .cal td.on::before { height: 14px; }
}
/* Notre histoire */
.story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.story-motto { margin-top: 14px; font-family: var(--f-slab); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.25; color: var(--green-ink); }
.story-text p:not(.story-motto) { margin-top: 16px; max-width: 62ch; }
.story-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 3px; }
.story-steps::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform-origin: top; }
.story-steps li { position: relative; padding: 0 0 26px 26px; }
.story-steps li:last-child { padding-bottom: 0; }
.story-steps li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--field); }
.story-steps strong { display: block; font-family: var(--f-slab); font-weight: 400; font-size: 1.3rem; line-height: 1.15; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.story-steps span { display: block; margin-top: 4px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
@media (max-width: 1080px) and (min-width: 761px) {
  .onsite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onsite > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .onsite > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* Notre maïs sucré : bande vedette, au jaune du logo */
.corn { background: var(--gold); color: var(--ink); padding-block: clamp(48px, 7vw, 88px); border-bottom: 3px solid var(--green); }
.corn-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.corn-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: var(--green); color: var(--gold); border-radius: 99px; padding: 6px 16px 6px 8px; font-weight: 800; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.corn-eyebrow .ill { width: 26px; height: 26px; }
.corn h2 { margin-top: 18px; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); color: var(--green-2); }
.corn-lead { margin-top: 16px; font-size: 1.15rem; max-width: 52ch; }
.corn-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.corn-facts li { padding-left: 18px; border-left: 4px solid var(--green); }
.corn-facts strong { display: block; font-family: var(--f-slab); font-weight: 400; font-size: 1.3rem; line-height: 1.15; color: var(--green-2); }
.corn-facts span { display: block; margin-top: 2px; }
.corn-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.corn-cta .link-more { color: var(--green-2); border-color: var(--green); }
.corn-photos { max-width: 440px; justify-self: end; width: 100%; }
.corn-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.corn-photos picture { display: block; border-radius: var(--r); overflow: hidden; box-shadow: 0 10px 28px -14px rgba(21, 40, 27, .55); }
.corn-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.corn-photos .cp-a { grid-column: 1 / -1; }
.corn-photos .cp-a img { aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .corn-grid { grid-template-columns: 1fr; } .corn-photos { justify-self: stretch; max-width: 440px; } }

/* Où trouver nos produits ? */
.where { margin-top: 32px; padding-top: 24px; border-top: 2px solid rgba(253, 200, 4, .5); }
.where h3 { font-size: 1.5rem; }
.where ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.where li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.where .ill { width: 48px; height: 48px; }
.where h4 { margin: 0; font-family: var(--f-slab); font-weight: 400; font-size: 1.2rem; line-height: 1.15; }
.where p { margin: 4px 0 0; }
.where small { display: block; margin-top: 6px; font-weight: 700; font-size: .9rem; color: var(--gold); }
.where .where-outro { margin-top: 20px; font-weight: 700; }

/* Effets (désactivés si l'appareil demande moins d'animations) */
@media (prefers-reduced-motion: no-preference) {
  /* sections qui apparaissent */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .story-steps.reveal { opacity: 1; transform: none; }
  .story-steps.reveal::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .1s; }
  .story-steps.reveal.in::before { transform: scaleY(1); }
  .story-steps li.reveal::before { transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .25s; }
  .story-steps li.reveal.in::before { transform: scale(1); }
  .kiosk-photo.reveal { transform: translateY(26px) rotate(-2deg); }
  .kiosk-photo.reveal.in { transform: rotate(1.5deg); }

  /* calendrier : les rangs poussent */
  .cal-anim td.on::before { transform: scaleX(0); transform-origin: left center; }
  .cal-anim.grow td.on::before { transform: scaleX(1); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
  .cal-anim.grow td:nth-child(3)::before { transition-delay: .12s; }
  .cal-anim.grow td:nth-child(4)::before { transition-delay: .24s; }
  .cal-anim.grow td:nth-child(5)::before { transition-delay: .36s; }
  .cal-anim.grow td:nth-child(6)::before { transition-delay: .48s; }

  /* survols */
  .strip-grid img, .corn-photos img, .crop-photo img, .kiosk-photo img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .strip-grid figure:hover img, .corn-photos picture:hover img, .crop:hover .crop-photo img, .kiosk-photo:hover img { transform: scale(1.07); }
  .brand:hover img { animation: epis .7s ease-in-out; }
  @keyframes epis { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg) scale(1.03); } 60% { transform: rotate(3deg) scale(1.03); } }
}