/* Fichier produit par le build (scripts/build/styles.mjs) à partir de styles/jardin/*.css : c'est là qu'il faut modifier. */
/* ================================================================
   Au jardin : un plan dessiné, pas un relevé. Deux massifs qui
   s'emboîtent, les plantes posées dedans, numérotées comme sur une
   planche de botanique. Celles qui sont à leur avantage au mois choisi
   sur la réglette prennent la couleur d'accent, sur le plan et dans la liste.
   ================================================================ */
.jardin-bilan { margin: -8px 0 clamp(24px, 5vh, 44px); animation: fade 1s var(--ease) 0.45s both; }
.jardin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 56px;
  max-width: 62rem;
  animation: fade 1s var(--ease) 0.5s both;
}
.jardin__plan { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; color: var(--ink); overflow: visible; }
.jardin__massifs path { fill: color-mix(in srgb, currentColor 5%, transparent); }
.jardin__traits path {
  fill: none; stroke: currentColor; stroke-opacity: 0.42; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: draw 2.2s var(--ease) both;
  animation-delay: calc(0.5s + var(--i) * 0.35s);
}
/* les pas japonais : une ligne de petits points, de la terrasse au fond */
.jardin__pas { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 13; animation: fondu 1.6s ease 1.5s both; }
.jardin__terrasse path { fill: none; stroke: currentColor; stroke-opacity: var(--o); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jardin__plan text { font-family: var(--engraved); font-size: 9.5px; letter-spacing: 0.04em; fill: var(--muted); transition: fill 0.6s ease; }
.jardin__terrasse text { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

.pl { cursor: pointer; outline: none; text-decoration: none; }
.pl__signe {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 0.7s var(--ease) both;
  animation-delay: calc(1.3s + var(--i) * 0.05s);
}
.pl__signe circle, .pl__signe rect {
  fill: color-mix(in srgb, currentColor 7%, transparent);
  stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke;
  transition: fill 0.6s ease, stroke 0.6s ease, stroke-opacity 0.6s ease;
}
.pl__signe .pl__coeur { fill: currentColor; fill-opacity: 0.6; stroke: none; }
.pl text { animation: fondu 0.8s ease both; animation-delay: calc(1.5s + var(--i) * 0.05s); }

/* au mois choisi sur la réglette */
.pl.fort .pl__signe :is(circle, rect):not(.pl__coeur) {
  fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-opacity: 0.9;
}
.pl.fort text { fill: var(--ink); }

/* une plante désignée : au survol, au clavier, ou par son nom dans la liste */
.pl:hover .pl__signe :is(circle, rect):not(.pl__coeur), .pl:focus-visible .pl__signe :is(circle, rect):not(.pl__coeur),
.pl.vu .pl__signe :is(circle, rect):not(.pl__coeur), .pl:target .pl__signe :is(circle, rect):not(.pl__coeur) {
  fill: color-mix(in srgb, currentColor 30%, transparent); stroke: currentColor; stroke-opacity: 1;
}
.pl:hover text, .pl:focus-visible text, .pl.vu text, .pl:target text { fill: var(--ink); }

.jardin__liste { display: grid; gap: 26px; align-content: start; }
.jardin__groupe h2 { margin: 0 0 8px; font-weight: 400; }
.jardin__groupe ol { list-style: none; margin: 0; padding: 0; }
.jardin__groupe li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
  padding: 3px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  scroll-margin-top: 96px;
}
.jardin__groupe li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.jardin__groupe li a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: baseline;
  min-height: 36px;
  padding: 7px 0;
  color: var(--ink);
  text-decoration: none;
}
.pl__n { font-family: var(--engraved); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); transition: color 0.6s ease; }
.pl__nom { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 18px; line-height: 1.25; }
.pl__cv { font-style: normal; font-size: 15px; color: var(--muted); white-space: nowrap; }
.pl__note { display: none; font-size: 13px; line-height: 1.3; color: var(--muted); text-align: right; transition: color 0.6s ease; }
li.fort .pl__note { color: var(--accent); }
.jardin[data-vue="printemps"] .pl__note--printemps,
.jardin[data-vue="ete"] .pl__note--ete,
.jardin[data-vue="automne"] .pl__note--automne,
.jardin[data-vue="hiver"] .pl__note--hiver { display: block; }
li.fort .pl__n { color: var(--accent); }
.jardin__groupe li a:hover .pl__nom, .jardin__groupe li.vu .pl__nom, .jardin__groupe li:target .pl__nom {
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.jardin__groupe li a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.jardin__plan { scroll-margin-top: 80px; }

@media (max-width: 520px) {
  .jardin__groupe li { grid-template-columns: minmax(0, 1fr); }
  .jardin__groupe li a { padding-bottom: 0; min-height: 32px; }
  .pl__note { text-align: left; padding: 0 0 8px 1.9rem; }
}
@media (min-width: 820px) {
  .jardin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .jardin__plan { position: sticky; top: 88px; margin: 0; }
}

/* Le jardin au fil de l'année : une réglette de douze mois. Le plan et la liste prennent
   l'état du mois choisi et la couleur de sa saison ; au chargement, c'est le mois en cours.
   Le curseur glisse en continu et se cale sur un mois quand on le lâche. */
.reglette { max-width: 30rem; margin: 0 0 clamp(18px, 3vh, 28px); animation: fade 1s var(--ease) 0.5s both; }
.reglette__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; }
.reglette__mois { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 26px; line-height: 1.15; color: var(--ink); }
.reglette__n { font-size: 13px; color: var(--muted); }
.reglette input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.reglette input:focus { outline: none; }
.reglette input::-webkit-slider-runnable-track { height: 1px; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.reglette input::-moz-range-track { height: 1px; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.reglette input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -7.5px; border: 1px solid var(--accent); border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 3px, var(--bg) 3.6px);
  transition: transform 0.3s var(--ease), border-color 0.6s ease;
}
.reglette input::-moz-range-thumb {
  box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 3px, var(--bg) 3.6px);
  transition: transform 0.3s var(--ease), border-color 0.6s ease;
}
.reglette input:hover::-webkit-slider-thumb, .reglette input:active::-webkit-slider-thumb { transform: scale(1.18); }
.reglette input:hover::-moz-range-thumb, .reglette input:active::-moz-range-thumb { transform: scale(1.18); }
.reglette input:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--ink); outline-offset: 3px; }
.reglette input:focus-visible::-moz-range-thumb { outline: 1px solid var(--ink); outline-offset: 3px; }
/* les initiales des mois, alignées sur les crans du curseur (8px : la moitié du curseur) */
.reglette__lettres { display: flex; justify-content: space-between; margin: -8px 8px 0; font-family: var(--engraved); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.reglette__lettres span { position: relative; display: flex; justify-content: center; width: 0; padding: 4px 0 10px; cursor: pointer; opacity: 0.7; transition: color 0.4s ease, opacity 0.4s ease; }
.reglette__lettres span::before { content: ""; position: absolute; inset: 0 -0.9em; } /* zone de toucher */
.reglette__lettres span.ici { color: var(--ink); opacity: 1; }
/* un point sous le mois où l'on est vraiment */
.reglette__lettres span.auj::after { content: ""; position: absolute; left: -1.5px; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); transition: background-color 0.6s ease; }
.reglette__jouer {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--engraved); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; transition: color 0.3s ease;
}
.reglette__jouer[hidden] { display: none; }
.reglette__jouer:hover, .reglette__jouer[aria-pressed="true"] { color: var(--ink); }
.reglette__jouer:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.reglette__jouer svg { color: var(--accent); overflow: visible; transition: color 0.6s ease; }
.reglette__jouer[aria-pressed="true"] svg path { fill: currentColor; }
/* la couleur d'accent suit la saison du mois choisi (mêmes teintes que le thème du site) */
.jardin[data-vue="printemps"], .reglette[data-vue="printemps"], .gestes[data-vue="printemps"] { --accent: #E6B3BD; }
.jardin[data-vue="ete"], .reglette[data-vue="ete"], .gestes[data-vue="ete"] { --accent: #A9BC86; }
.jardin[data-vue="automne"], .reglette[data-vue="automne"], .gestes[data-vue="automne"] { --accent: #D29C6E; }
.jardin[data-vue="hiver"], .reglette[data-vue="hiver"], .gestes[data-vue="hiver"] { --accent: #AFC2C9; }
[data-theme="jour"] .jardin[data-vue="printemps"], [data-theme="jour"] .reglette[data-vue="printemps"], [data-theme="jour"] .gestes[data-vue="printemps"] { --accent: #974659; }
[data-theme="jour"] .jardin[data-vue="ete"], [data-theme="jour"] .reglette[data-vue="ete"], [data-theme="jour"] .gestes[data-vue="ete"] { --accent: #4D6B3C; }
[data-theme="jour"] .jardin[data-vue="automne"], [data-theme="jour"] .reglette[data-vue="automne"], [data-theme="jour"] .gestes[data-vue="automne"] { --accent: #8C502B; }
[data-theme="jour"] .jardin[data-vue="hiver"], [data-theme="jour"] .reglette[data-vue="hiver"], [data-theme="jour"] .gestes[data-vue="hiver"] { --accent: #4D6672; }

/* ================================================================
   Faut-il arroser ? (/au-jardin/eau/, voir assets/eau.js) : le verdict en grand,
   la réserve de chaque sol, sa courbe sur trente jours et sept à venir, la cuve.
   ================================================================ */
/* Au jardin : le lien vers la page, avec la réponse du jour */
.jardin-eau { display: flex; flex-direction: column; align-items: flex-start; margin: calc(clamp(24px, 5vh, 44px) * -0.55) 0 clamp(24px, 5vh, 44px); animation: fade 1s var(--ease) 0.48s both; }
.jardin-eau a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; align-content: center; color: var(--ink); text-decoration: none; }
.jardin-eau a > span:first-child { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 19px; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.jardin-eau__bref { font-size: 13px; color: var(--muted); animation: fondu 0.8s ease both; }
.jardin-eau .go { color: var(--accent); transition: transform 0.3s var(--ease); }
.jardin-eau a:hover .go { transform: translateX(3px); }
.jardin-eau a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.eau { max-width: 44rem; animation: fade 1s var(--ease) 0.5s both; }
.eau__essai { margin: 0 0 14px; color: var(--accent); }
.eau__verdict { margin: 0 0 clamp(28px, 5vh, 44px); }
.eau__reponse { margin: 0 0 10px; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 10vw, 68px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink); text-shadow: var(--relief); }
.eau[data-etat="attente"] .eau__reponse { color: var(--muted); }
.eau[data-verdict="oui"] .eau__reponse, .eau[data-verdict="attendre"] .eau__reponse { font-style: italic; color: var(--accent); }
.eau__phrase { max-width: 34rem; margin: 0 0 8px; font-size: 17px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.eau__faits { max-width: 34rem; margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.eau[data-etat="pret"] .eau__reponse, .eau[data-etat="pret"] .eau__phrase, .eau[data-etat="pret"] .eau__faits { animation: fondu 0.9s ease both; }
/* tant que le ciel n'a pas répondu (ou s'il ne répond pas), le reste attend */
.eau:not([data-etat="pret"]) :is(.eau__zones, .eau__figure, .eau__arrose, .cuve) { display: none; }

/* les deux sols : un nom, un état, une jauge avec son seuil */
.eau__zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; margin: 0 0 18px; }
@media (min-width: 560px) { .eau__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eau-zone {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline;
  margin: 0; padding: 14px 0 14px; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color 0.3s ease;
}
.eau-zone:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.eau-zone__nom { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.2; color: var(--soft); transition: color 0.3s ease; }
.eau-zone[aria-pressed="true"] .eau-zone__nom, .eau-zone:hover .eau-zone__nom { color: var(--ink); }
.eau-zone[aria-pressed="true"] .eau-zone__nom { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.eau-zone__etat { font-family: var(--engraved); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.eau-zone.soif .eau-zone__etat { color: var(--accent); }
.eau-zone__jauge { grid-column: 1 / -1; position: relative; height: 3px; margin: 6px 0 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.eau-zone__niveau { position: absolute; inset: 0; background: var(--ink); opacity: 0.75; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease), background-color 0.4s ease; }
.eau-zone.soif .eau-zone__niveau { background: var(--accent); opacity: 1; }
.eau-zone__seuil { position: absolute; top: -4px; width: 1px; height: 11px; background: var(--muted); }
.eau-zone__mm { font-size: 13px; color: var(--soft); }
.eau-zone__sol { font-size: 13px; text-align: right; }
@media (max-width: 420px) { .eau-zone__sol { grid-column: 1 / -1; text-align: left; } }

/* la courbe */
.eau__figure { margin: 0 0 6px; }
.eau__courbe { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; touch-action: pan-y; cursor: crosshair; }
.eau__soif { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.eau__cadre { fill: none; stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eau__seuil { fill: none; stroke: var(--accent); stroke-opacity: 0.7; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.eau__pluie, .eau__arrosage { transform-box: fill-box; transform-origin: bottom; animation: goutte 0.7s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 0.02s); }
.eau__pluie { fill: var(--accent); fill-opacity: 0.6; }
.eau__pluie--prevue { fill-opacity: 0.28; }
.eau__arrosage { fill: currentColor; fill-opacity: 0.45; }
.eau__avenir { fill: currentColor; fill-opacity: 0.035; }
.eau__traits { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eau__trait { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eau__trait--trace { stroke-dasharray: 1; animation: draw 1.8s var(--ease) 0.2s both; }
.eau__trait--prevu { stroke-dasharray: 2 5; stroke-opacity: 0.7; }
.eau__auj { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eau__axe { font-family: var(--engraved); font-size: 10.5px; letter-spacing: 0.06em; fill: var(--muted); }
.eau__axe--seuil { fill: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; }
.eau__axe--lisere { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.eau__axe--auj { fill: var(--ink); }
/* le nom de chaque bande, avec son unité : c'est sa légende */
.eau__axe--titre { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.eau__cle { font-size: 8px; letter-spacing: 0; }
.eau__cle--pluie { fill: var(--accent); fill-opacity: 0.6; }
.eau__cle--arrosage { fill: var(--ink); fill-opacity: 0.45; }
.eau__valeur { font-family: var(--sans); font-size: 10.5px; fill: var(--soft); font-variant-numeric: tabular-nums; }
.eau__repere { transition: transform 0.18s ease-out; }
.eau__repere path { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eau__repere circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: cy 0.18s ease-out; }
@keyframes goutte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.eau__figure figcaption { display: grid; gap: 6px; margin-top: 8px; }
.eau__lecture { font-size: 14px; color: var(--ink); min-height: 1.5em; font-variant-numeric: tabular-nums; }
.eau__legende { font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* les gestes : petites capitales, comme les autres boutons du site */
.eau__arrose, .cuve__gestes button {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--engraved); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  color: var(--muted); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px;
  cursor: pointer; transition: color 0.3s ease;
}
.eau__arrose:hover, .cuve__gestes button:hover, .eau__arrose[aria-pressed="true"] { color: var(--ink); }
.eau__arrose:focus-visible, .cuve__gestes button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.cuve__gestes button[hidden] { display: none; }
.eau__note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* la cuve : un dessin au trait, l'eau monte et descend, une vague passe */
.cuve { margin-top: clamp(36px, 7vh, 64px); padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.cuve h2 { margin: 0 0 18px; font-weight: 400; }
.cuve__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; align-items: center; }
@media (min-width: 560px) { .cuve__corps { grid-template-columns: 170px minmax(0, 1fr); } }
.cuve__dessin { display: block; width: 100%; max-width: 170px; height: auto; color: var(--ink); overflow: visible; }
.cuve__paroi { fill: none; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cuve__trait { fill: none; stroke: currentColor; stroke-opacity: 0.4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cuve__dessin text { font-family: var(--engraved); font-size: 8px; letter-spacing: 0.04em; fill: var(--muted); }
.cuve__eau { transform: translateY(calc(26px + (1 - var(--cuve, 0)) * 130px)); transition: transform 1.4s var(--ease); }
.cuve__vague { fill: color-mix(in srgb, var(--accent) 24%, transparent); stroke: var(--accent); stroke-opacity: 0.8; stroke-width: 1; vector-effect: non-scaling-stroke; animation: vague 7s linear infinite; }
@keyframes vague { to { transform: translateX(40px); } }
.cuve__chiffre { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.cuve__litres { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cuve__phrase { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--soft); }
.cuve__depuis { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.cuve__regler { display: block; max-width: 22rem; }
.cuve__regler .label { display: block; }
.cuve__gestes { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }
/* le curseur de la cuve reprend celui de la réglette du jardin */
.cuve__curseur { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cuve__curseur:focus { outline: none; }
.cuve__curseur::-webkit-slider-runnable-track { height: 1px; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.cuve__curseur::-moz-range-track { height: 1px; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.cuve__curseur::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border: 1px solid var(--accent); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 3px, var(--bg) 3.6px); }
.cuve__curseur::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 3px, var(--bg) 3.6px); }
.cuve__curseur:focus-visible::-webkit-slider-thumb { outline: 1px solid var(--ink); outline-offset: 3px; }
.cuve__curseur:focus-visible::-moz-range-thumb { outline: 1px solid var(--ink); outline-offset: 3px; }


/* Comment c'est compté (Faut-il arroser ?, Où tombe l'ombre ?) : un petit « i » en fin d'intro ouvre une bulle.
   La bulle se pose sous le « i » quand le navigateur sait l'y ancrer ; sinon, au milieu de l'écran. */
.infobulle__bouton {
  position: relative; display: inline-grid; place-items: center; vertical-align: middle;
  width: 24px; height: 24px; margin: -4px 0 -2px; padding: 0;
  border: 0; background: none; color: var(--accent);
  font: italic 300 14px/1 var(--serif);
  cursor: pointer; anchor-name: --infobulle;
}
.infobulle__bouton::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.infobulle__bouton:hover::before,
.page-intro:has(+ .infobulle:popover-open) .infobulle__bouton::before { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.infobulle__bouton:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; border-radius: 50%; }

.infobulle {
  width: min(25rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter)); overflow: auto;
  margin: auto; padding: 18px 20px 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 4px;
  background: var(--bg); color: var(--soft); box-shadow: var(--photo-shadow);
  font-size: 14px; line-height: 1.65; text-wrap: pretty;
}
.infobulle::backdrop { background: transparent; }
.infobulle .label { margin: 0 0 10px; }
.infobulle p { margin: 0 0 12px; }
.infobulle a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
@supports (position-area: bottom) {
  .infobulle {
    position-anchor: --infobulle; inset: auto; margin: 6px 0;
    position-area: bottom span-right; position-try-fallbacks: bottom span-left, flip-block, bottom;
  }
  /* sur téléphone, la bulle prend la largeur de la page, entre les marges */
  @media (max-width: 600px) { .infobulle { position-area: bottom span-all; justify-self: center; position-try-fallbacks: flip-block; } }
}
@media (prefers-reduced-motion: no-preference) {
  .infobulle { opacity: 0; translate: 0 -4px; transition: opacity 0.25s ease, translate 0.4s var(--ease), overlay 0.25s allow-discrete, display 0.25s allow-discrete; }
  .infobulle:popover-open { opacity: 1; translate: 0 0; }
  @starting-style { .infobulle:popover-open { opacity: 0; translate: 0 -4px; } }
}
.eau + .back { margin-top: clamp(28px, 5vh, 48px); }

/* Au jardin : une plante prévue, pas encore plantée — tracée en pointillé */
.pl--projet .pl__signe circle:not(.pl__coeur) { stroke-dasharray: 3 3; fill: transparent; }
.jardin[data-vue] .pl--projet .pl__signe circle:not(.pl__coeur) { fill: transparent; }
.pl--projet .pl__coeur { fill-opacity: 0.35; }

/* ================================================================
   Que faire ce mois-ci ? (/au-jardin/gestes/, voir assets/gestes.js) : les gestes
   du mois choisi sur la réglette, puis l'année en tableau.
   ================================================================ */
/* Au jardin : un point à l'épaule de la plante qui attend un geste, et le geste dans la liste */
.pl__point { fill: var(--ink); opacity: 0; transition: opacity 0.6s ease; }
.pl__point.fort { opacity: 0.85; }
.jardin__groupe li a.pl__faire { display: none; grid-column: 1 / -1; min-height: 0; padding: 0 0 9px 1.9rem; font-size: 13px; line-height: 1.35; color: var(--soft); }
.jardin__groupe li a.pl__faire.fort { display: block; }
.pl__faire::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--ink); opacity: 0.85; }
.jardin__groupe li a.pl__faire:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.gestes { max-width: 44rem; animation: fade 1s var(--ease) 0.5s both; }
.gestes__liste { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.geste { display: none; padding: 16px 0 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); scroll-margin-top: 96px; }
.geste.fort { display: block; animation: fondu 0.6s ease both; }
.geste__tete { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px; }
.geste__type { color: var(--accent); transition: color 0.6s ease; }
.geste__qui { margin: 0; font-weight: 400; font-size: inherit; }
.geste__qui a { display: inline-grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: baseline; color: var(--ink); text-decoration: none; }
.geste__qui a:hover .pl__nom { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.geste__qui a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.geste__qui .pl__nom { font-size: 22px; }
.geste__qui > .pl__nom { display: block; }
.geste__quoi { margin: 6px 0 4px; font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.geste__detail { max-width: 36rem; margin: 0; font-size: 15px; line-height: 1.65; color: var(--soft); text-wrap: pretty; }
.geste__fait {
  display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 -8px; padding: 0; border: 0; background: none;
  font-family: var(--engraved); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  color: var(--muted); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px;
  cursor: pointer; transition: color 0.3s ease;
}
.geste__fait[hidden] { display: none; }
.geste__fait:hover, .geste__fait[aria-pressed="true"] { color: var(--ink); }
.geste__fait:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.geste.est-fait :is(.geste__qui, .geste__quoi, .geste__detail) { opacity: 0.45; transition: opacity 0.4s ease; }
.geste.est-fait .geste__quoi { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.geste--vide .geste__quoi { margin: 0; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 20px; color: var(--soft); }
.gestes__note { margin-top: 12px; }
.gestes__note[hidden] { display: none; }

.gestes__bloc { margin-top: clamp(36px, 7vh, 64px); }
.gestes__bloc h2 { margin: 0 0 14px; font-weight: 400; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.cal thead td { width: 42%; }
.cal thead th { padding: 0 0 6px; font-family: var(--engraved); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); text-align: center; }
.cal abbr { text-decoration: none; }
.cal tbody th { padding: 6px 8px 6px 0; font-weight: 400; text-align: left; color: var(--soft); line-height: 1.25; text-wrap: balance; }
.cal tbody th .pl__cv { font-size: 12px; }
.cal tbody tr { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cal td, .cal thead th { transition: background-color 0.5s ease; }
.cal td { padding: 0; text-align: center; vertical-align: middle; }
.cal__s { display: inline-block; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.cal__s--taille { background: var(--ink); opacity: 0.8; }
.cal__s--entretien { border: 1px solid var(--ink); opacity: 0.8; }
.cal__s--plantation { width: 7px; height: 7px; border-radius: 1px; background: var(--accent); transform: rotate(45deg); transition: background-color 0.6s ease; }
/* la colonne du mois choisi sur la réglette */
.gestes[data-m="1"] .cal tr > :nth-child(2), .gestes[data-m="2"] .cal tr > :nth-child(3), .gestes[data-m="3"] .cal tr > :nth-child(4), .gestes[data-m="4"] .cal tr > :nth-child(5), .gestes[data-m="5"] .cal tr > :nth-child(6), .gestes[data-m="6"] .cal tr > :nth-child(7), .gestes[data-m="7"] .cal tr > :nth-child(8), .gestes[data-m="8"] .cal tr > :nth-child(9), .gestes[data-m="9"] .cal tr > :nth-child(10), .gestes[data-m="10"] .cal tr > :nth-child(11), .gestes[data-m="11"] .cal tr > :nth-child(12), .gestes[data-m="12"] .cal tr > :nth-child(13) { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.cal__legende { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.cal__legende span { display: inline-flex; align-items: center; gap: 8px; }
.gestes__suite { list-style: none; margin: 0; padding: 0; }
.gestes__suite li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 15px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.gestes__suite li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.gestes__suite .pl__nom { margin-right: 6px; color: var(--ink); }
.gestes + .back { margin-top: clamp(28px, 5vh, 48px); }
@media (max-width: 520px) {
  .cal thead td { width: 38%; }
}

/* ================================================================
   Où tombe l'ombre ? (/au-jardin/ombre/, voir assets/ombre.js) : le jardin à l'échelle,
   les couronnes à l'année choisie et leurs ombres au jour et à l'heure choisis.
   ================================================================ */
.ombre {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 22px; align-items: start;
  grid-template-areas: "plan lecture" "commandes commandes" "journee journee";
  max-width: 62rem; animation: fade 1s var(--ease) 0.5s both;
}
.ombre__cote { display: contents; }
.ombre__plan { grid-area: plan; display: block; height: min(58vh, 560px); width: auto; color: var(--ink); overflow: visible; transition: opacity 0.6s ease; }
.ombre__lecture { grid-area: lecture; align-self: center; }
.ombre__commandes { grid-area: commandes; }
.ombre__journee { grid-area: journee; }
.ombre[data-ciel="nuit"] .ombre__plan { opacity: 0.55; }
.ombre[data-ciel="nuit"] .ombre__legende { display: none; } /* la nuit, ni ombre ni soleil : pas de « à l'ombre » sous le tiret */

/* le terrain */
.ombre__dalle { fill: color-mix(in srgb, currentColor 5%, transparent); }
.ombre__massifs path { fill: color-mix(in srgb, currentColor 5%, transparent); stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ombre__cloture { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ombre__seuil { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ombre__mur { fill: none; stroke: currentColor; stroke-opacity: 0.7; stroke-width: 3; stroke-linecap: round; }
.ombre__haie { fill: none; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.ombre__ecran { fill: none; stroke: currentColor; stroke-opacity: 0.7; stroke-width: 2.5; stroke-linecap: round; }
.ombre__volume { fill: color-mix(in srgb, currentColor 8%, transparent); stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ombre__nom { font-family: var(--engraved); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--muted); }
.ombre__nord path { fill: none; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; }
.ombre__nord circle { fill: currentColor; fill-opacity: 0.6; }
.ombre__nord text { font-family: var(--engraved); font-size: 9.5px; fill: var(--muted); }
.ombre__astre circle { fill: var(--accent); }
.ombre__astre path { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.ombre[data-ciel="nuit"] .ombre__astre, .ombre:not([data-etat="pret"]) .ombre__astre { display: none; }

/* les ombres : chaque groupe est d'une seule teinte, les recouvrements ne foncent pas */
.ombre__ombres { fill: var(--ink); stroke: var(--ink); }
.ombre__ombres--pleines { opacity: 0.2; }
.ombre__ombres--nues { opacity: 0.07; }
.ombre__ombres line { stroke-width: 2.5; stroke-linecap: round; }
.ombre__ombres ellipse, .ombre__ombres polygon { stroke: none; }

/* les couronnes */
.ombre__plante { cursor: pointer; outline: none; }
.ombre__plante circle { fill: color-mix(in srgb, var(--bg) 35%, transparent); stroke: currentColor; stroke-opacity: 0.4; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 0.3s ease, stroke 0.3s ease; }
.ombre__plante--arbre circle { fill: color-mix(in srgb, var(--accent) 13%, transparent); stroke: var(--accent); stroke-opacity: 0.9; }
.ombre__plante .ombre__coeur { fill: var(--accent); stroke: none; }
.ombre__plante--avenir circle { fill: transparent; stroke-dasharray: 3 3; }
.ombre__plante--avenir .ombre__coeur { fill-opacity: 0.4; }
.ombre__plante:hover circle:not(.ombre__coeur), .ombre__plante:focus-visible circle:not(.ombre__coeur), .ombre__plante.vu circle:not(.ombre__coeur) { fill: color-mix(in srgb, currentColor 26%, transparent); stroke: currentColor; stroke-opacity: 1; }

/* la lecture : la part de la terrasse à l'ombre, en grand */
.ombre__lecture .label { margin: 0 0 6px; }
.ombre__chiffre { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 13vw, 68px); line-height: 1; color: var(--ink); text-shadow: var(--relief); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ombre__legende { margin: 4px 0 10px; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 19px; color: var(--accent); }
.ombre__qui { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--soft); min-height: 1.5em; }
.ombre__soleil { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* les commandes */
.ombre__commande { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 14px; max-width: 30rem; margin: 0 0 4px; }
.ombre__valeur { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.2; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ombre__commande input { grid-column: 1 / -1; }
.ombre__gestes { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 4px 0 0; }
.ombre__gestes button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--engraved); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  color: var(--muted); cursor: pointer; transition: color 0.3s ease;
}
.ombre__maintenant { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ombre__gestes button:hover, .ombre__jouer[aria-pressed="true"] { color: var(--ink); }
.ombre__gestes button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.ombre__jouer svg { color: var(--accent); overflow: visible; }
.ombre__jouer[aria-pressed="true"] svg path { fill: currentColor; }
.ombre__fiche { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); min-height: 1.5em; }

/* la terrasse au fil de la journée : une barre par demi-heure */
.ombre__journee { max-width: 30rem; margin-top: clamp(16px, 3vh, 28px); padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ombre__journee h2 { margin: 0 0 16px; font-weight: 400; }
.ombre__bande { display: flex; align-items: flex-end; gap: 2px; height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.ombre__bande i { flex: 1 1 0; height: max(2px, calc(var(--p) * 100%)); background: var(--ink); opacity: 0.32; cursor: pointer; transition: height 0.4s var(--ease), opacity 0.3s ease, background-color 0.3s ease; }
.ombre__bande i:hover { opacity: 0.6; }
.ombre__bande i.ici { background: var(--accent); opacity: 1; }
.ombre__bornes { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }
.ombre__note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ombre:not([data-etat="pret"]) :is(.ombre__commandes, .ombre__journee) { visibility: hidden; }
.ombre + .back { margin-top: clamp(28px, 5vh, 48px); }

@media (min-width: 820px) {
  .ombre { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plan cote"; gap: 0 72px; }
  .ombre__cote { grid-area: cote; display: block; }
  .ombre__plan { position: sticky; top: 88px; height: min(80vh, 760px); }
  .ombre__lecture { margin-bottom: clamp(20px, 4vh, 36px); }
}