/* GOODBOWL : passe d'octobre, chargée après site.css.
   Young Serif pour les titres (la chaleur d'une table), Satoshi pour l'interface et les données.
   Une seule navigation, la ville reteinte à la lumière de l'aube, des scènes plus courtes,
   et le geste comme mouvement : rond, vif, un léger rebond. */

:root {
  --f-titre: "Young Serif", Georgia, "Times New Roman", serif;
  --geste: cubic-bezier(0.3, 1.32, 0.5, 1);
  --pose: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ink-3: rgba(255, 255, 255, 0.54);   /* 0,38 ne tenait que 4:1 sur le fond */
}
html { scrollbar-color: #5a6b2a #0b0b0b; scrollbar-width: thin; }
body { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- typographie ---------- */
.aube__title, .source__title, .recolte__title, .partners__title, .compo__title, .saison__title,
.ingr__title, .kitchen__title, .join__title, .tablee__title, .pcard__name, .saison__month span, .say figcaption b, .note h3 {
  font-family: var(--f-titre); font-weight: 400; letter-spacing: -0.012em;
}
.recolte__title, .compo__title, .saison__title { font-size: clamp(2.1rem, 3.6vw, 3.7rem); line-height: 1.04; }
.source__title { font-size: clamp(2.2rem, 4.1vw, 4.1rem); line-height: 1.06; }
.partners__title { font-size: clamp(2rem, 3.7vw, 3.6rem); line-height: 1.06; }
.join__title { font-size: clamp(2.3rem, 4.6vw, 4.6rem); line-height: 1.04; }
.ingr__title, .kitchen__title { line-height: 1.06; }
.note h3 { font-size: 1.15rem; }
.note p { font-size: 0.86rem; }
.say figcaption b { font-size: 1.2rem; }
.say blockquote, .kitchen__body, .join__sub { font-size: 1rem; line-height: 1.55; }
.pcard__name { font-size: 1.6rem; }
.rail li { color: rgba(255, 255, 255, 0.56); }

/* ---------- une seule navigation : le logo, Commander, l'index latéral ---------- */
.nav { grid-template-columns: 1fr auto; transition: transform 0.45s var(--pose); }
.nav.cachee { transform: translateY(-110%); }
.rail.fin { opacity: 0 !important; visibility: hidden !important; }

/* ---------- accueil : le titre se range à côté du bol, plus dessus ---------- */
@media (min-width: 761px) {
  .aube__media video { object-position: 22% 50%; }
  .aube__txt { max-width: min(38vw, 560px); }
  .aube__title { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.04; margin-top: 0; }
  .aube__title .ln { white-space: normal; text-wrap: balance; padding-bottom: 0.14em; }
  .aube__lead { max-width: 36ch; }
}
@media (max-width: 760px) {
  /* le bol remonte et le voile s'épaissit sous lui : le titre ne se lit plus sur les légumes */
  .aube__media video { transform: translateY(-8%); }
  .aube__media::after { background: linear-gradient(0deg, rgba(5, 5, 5, 0.97), rgba(5, 5, 5, 0.93) 40%, rgba(5, 5, 5, 0.7) 50%, rgba(5, 5, 5, 0.18) 64%, transparent 80%); }
  .aube__title { font-size: clamp(2.1rem, 9.4vw, 2.9rem); line-height: 1.05; }
  .aube__title .ln { padding-bottom: 0.14em; }
}

/* la fin : la tomate ne touche plus le titre, l'invite « Glisser » ne recouvre plus les engagements */
@media (min-width: 861px) { .join__floaters .fl--tomate { left: 6%; top: 20%; } }
.says__hint { left: auto; right: var(--gutter); top: -46px; bottom: auto; transform: none; }

/* ---------- la ville : la même lumière que la table de l'accueil ----------
   Les images de la ville étaient froides, noires et vert néon ; un filtre chaud et un soleil rasant
   la ramènent au champ à l'aube. Les partenaires prennent des pigments naturels (voir partners.js). */
.scene__canvas { filter: sepia(0.42) saturate(1.18) hue-rotate(-14deg) brightness(1.06); }
.source__pin::after, .partners__pin::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(95% 80% at 8% 0%, rgba(255, 178, 96, 0.55), transparent 62%);
  mix-blend-mode: soft-light;
}
@media (prefers-reduced-transparency: reduce) { .source__pin::after, .partners__pin::after { display: none; } }

/* ---------- des scènes plus courtes : la page passe de 28 800 à environ 18 000 px ---------- */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .source { height: 170svh; } .partners { height: 270svh; } .recolte { height: 310svh; }
  .compo { height: 410svh; } .saison { height: 330svh; } .kitchen { height: 170svh; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .source { height: 150svh; } .partners { height: 250svh; } .recolte { height: 300svh; }
  .compo { height: 400svh; } .saison { height: 320svh; } .kitchen { height: 150svh; }
}

/* ---------- le geste : ce qui apparaît arrive vite et se pose avec un léger rebond ---------- */
[data-reveal].is-in { transition: opacity 0.55s ease-out, transform 0.75s var(--geste); }
.cta, .rbtn, .player__btn { transition-timing-function: var(--geste); }
/* les textes d'étape n'animent plus leur hauteur (la mise en page saccadait à chaque pas) : ils se posent d'un geste */
.rstep p, .cstep p { transform: translateY(-6px); transition: opacity 0.4s ease-out, transform 0.5s var(--geste); }
.rstep.is-on p, .cstep.is-on p { transform: none; }
.cta:active, .rbtn:active { transform: scale(0.96); }

/* ---------- la tablée : une image de table, le texte posé sur le lin resté libre à droite ---------- */
.tablee { position: relative; overflow: hidden; }
.tablee__img { display: block; width: 100%; height: min(92svh, 56.25vw); min-height: 460px; object-fit: cover; object-position: 30% 50%; }
.tablee__texte { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(40ch, 36vw); color: #2b2118; }
.tablee__title { font-size: clamp(1.7rem, 2.7vw, 2.9rem); line-height: 1.06; margin: 0 0 14px; }
.tablee__texte p { font-size: 1rem; line-height: 1.55; margin: 0; color: #4a3d30; }
@media (max-width: 860px) {
  .tablee__img { height: auto; min-height: 0; aspect-ratio: 1546 / 1438; object-position: 50% 50%; }
  .tablee__texte { position: static; transform: none; width: auto; padding: 28px var(--gutter) 8px; color: inherit; }
  .tablee__texte p { color: var(--ink-2); }
}

/* ---------- partenaires sur téléphone : la carte prend la largeur, la légende nomme le partenaire en cours ---------- */
@media (max-width: 860px) {
  .pcard { width: calc(100vw - 2 * var(--gutter)); }
  .pcard__inner { padding: 18px 18px 20px; }
  .pcard__flex img { width: 48px; height: 48px; }
  .pcard__name { font-size: 1.75rem; }
  .pcard__inner p { font-size: 1rem; line-height: 1.5; margin-top: 10px; }
  .plegend { gap: 8px; bottom: calc(3vh + env(safe-area-inset-bottom, 0px)); }
  .plegend img { width: 32px; height: 32px; }
  .plegend li.is-on { padding-right: 12px; }
  .plegend li.is-on span { display: inline; font-size: 0.84rem; }
}

/* ---------- accueil sur téléphone : un film vertical, le bol entier en haut, le texte sur la table sombre ---------- */
@media (max-width: 760px) and (orientation: portrait) {
  .aube__media video { transform: none; object-position: 50% 0; }
  .aube__media::after { background: linear-gradient(0deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.6) 30%, rgba(5, 5, 5, 0) 52%), linear-gradient(180deg, rgba(5, 5, 5, 0.55), rgba(5, 5, 5, 0) 14%); }
  .aube__tag { display: none; }
  .aube__txt { bottom: calc(6vh + env(safe-area-inset-bottom, 0px)); }
}