/* Arbres fruitiers: tree pickers with steppers, the summary, the guarantee and the fruit calendar. */
.trees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tree { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 10px 10px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18,20,18,.1); transition: box-shadow .25s var(--ease-out); }
.tree.is-on { box-shadow: inset 0 0 0 1.5px var(--zellige); }
.tree__pic { display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #ece9e2; }
.tree__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tree__meta { display: grid; gap: 4px; align-content: start; padding-inline: 4px; }
.tree__meta b { font: 400 22px/1.1 var(--font-serif); letter-spacing: -.01em; }
.tree__meta small { font: 400 13px/1.35 var(--font-text); color: var(--encre-soft); }
.tree__qty { justify-self: start; margin: 0; margin-inline-start: 4px; background: #fff; }
.tree__qty button[disabled] { opacity: .3; cursor: default; }
.tree__qty button[disabled]:hover { background: none; }
.tree__qty span { min-inline-size: 28px; font-size: 16px; }
.tree.is-on .tree__qty { border-color: var(--zellige); }
.nudge { margin: 2px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--menthe); font: 500 15px/1.4 var(--font-text); color: var(--zellige); }
.opt.is-off { opacity: .5; cursor: not-allowed; }
.opt.is-off input { cursor: not-allowed; }
.cfg .select { max-inline-size: 420px; }
.sum__what { margin: -6px 0 0; font: 400 15px/1.45 var(--font-text); color: var(--encre-soft); }
.sum__empty { margin: 0; font: 400 15px/1.5 var(--font-text); color: var(--encre-soft); }
.sum__save dd, .sum__save dt { color: var(--zellige); font-weight: 600; }
.sum__total { align-items: baseline; }
.sum__total .price-big { font-size: clamp(32px, 2.8vw, 44px); font-weight: 400; }
@media (max-width: 1200px) { .trees { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tree { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; } .tree__pic { grid-row: span 2; } .tree__qty { margin: 0; margin-inline-start: 4px; } }
@media (max-width: 600px) { .trees { grid-template-columns: 1fr; } .tree { grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; padding-block: 8px; padding-inline: 8px 12px; } .tree__pic { grid-row: auto; } .tree__qty { margin: 0; } }

/* guarantee */
.guar { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.guar__in { display: grid; gap: 22px; }
.guar__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guar__pics figure { margin: 0; display: grid; gap: 10px; }
.guar__pics .photo { aspect-ratio: 3 / 2; }
.guar__pics figcaption { font: 400 14px/1.3 var(--font-text); color: var(--encre-soft); }
@media (max-width: 900px) { .guar { grid-template-columns: 1fr; } }

/* fruit calendar: one row per tree, a bar per harvest */
.fcal { overflow-x: auto; scrollbar-width: thin; }
.fcal__in { position: relative; display: grid; min-inline-size: 640px; }
.fcal__row { display: grid; grid-template-columns: 210px repeat(12, minmax(0, 1fr)); align-items: center; min-block-size: 64px; border-block-start: 1px solid rgba(18,20,18,.12); }
.fcal__row:last-of-type { border-block-end: 1px solid rgba(18,20,18,.12); }
.fcal__months { min-block-size: 0; border: 0; padding-block-end: 12px; }
.fcal__months span { font: 500 12px/1 var(--font-text); text-align: center; color: var(--encre-soft); }
.fcal__months span.is-now { color: var(--zellige); font-weight: 600; }
.fcal__name { grid-row: 1; grid-column: 1; display: grid; gap: 4px; }
.fcal__name a { font: 400 22px/1.1 var(--font-serif); color: inherit; text-decoration: none; }
.fcal__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fcal__name small { font: 400 13px/1 var(--font-text); color: var(--encre-soft); }
.fcal__bar { grid-row: 1; block-size: 12px; margin-inline: 3px; border-radius: 99px; background: var(--zellige); transform-origin: left center; }
.fcal__now { position: absolute; inset-block: 22px 0; inset-inline-start: calc(210px + (100% - 210px) / 12 * (var(--m) - .5)); border-inline-start: 1.5px dashed var(--terre); pointer-events: none; }
.fcal__now span { position: absolute; inset-block-end: -24px; translate: -50% 0; font: 500 12px/1 var(--font-text); color: var(--terre); white-space: nowrap; }
.fcal { padding-block-end: 30px; }
@media (prefers-reduced-motion: no-preference) { .js .fcal__row[data-up]:not(.is-in) .fcal__bar { transform: scaleX(0); } .js .fcal__row.is-in .fcal__bar { transform: scaleX(1); transition: transform 1s var(--ease-reveal) calc(var(--d, 0s) + .2s); } }
.fcal__s { display: none; text-decoration: none; }
@media (max-width: 700px) { .fcal__row { grid-template-columns: 104px repeat(12, minmax(0, 1fr)); min-block-size: 58px; } .fcal__now { inset-inline-start: calc(104px + (100% - 104px) / 12 * (var(--m) - .5)); } .fcal__in { min-inline-size: 0; } .fcal__name a { font-size: 19px; } .fcal__name small { font-size: 12px; } .fcal__l { display: none; } .fcal__s { display: inline; } .fcal__bar { margin-inline: 1px; block-size: 10px; } }

/* right-to-left: the bars grow from the right, the "today" label centres on its line */
[dir="rtl"] .fcal__bar { transform-origin: right center; }
[dir="rtl"] .fcal__now span { translate: 50% 0; }