/* Recipe pages (/fr/recettes/…): the look of the Pinterest pins, so a click
   from a pin lands on the same page it promised. Loaded after landing.css. */
.recipe-page {
  --lavender:#7255b7;
  --lilac:#cdbfe3;
  --card:rgb(255 253 250 / .85);
  --card-shadow:0 18px 40px rgb(var(--shadow-rgb) / .08);
}

/* Not a screen per section here: the page reads top to bottom like the pins.
   One cream ground on <main> instead of one per section, so a plant can run
   across section edges; clip stops it widening the page. */
.recipe-page main { background:var(--cream); position:relative; isolation:isolate; overflow:clip; }
.recipe-page main > section { min-height:0; background:transparent; overflow:visible; }
.recipe-page main > section.section-pad { padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(56px,8vw,104px); }
.recipe-page main .container { max-width:880px; position:relative; }

/* The recipe's plant behind the content, lilac like the pins. Each page sets
   --plant inline on <body>, pointing at img/plants/. */

/* No stacking context of its own, so z-index:-1 puts the plant behind every
   card on the page, not just the ones in its own block. */
.recipe-art { position:relative; }
.recipe-art::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:calc(clamp(220px, 32vw, 400px) * var(--plant-scale, 1)); aspect-ratio:613 / 1200;
  background:var(--plant-color, var(--lilac)); opacity:var(--plant-opacity, .75);
  -webkit-mask:var(--plant) center / contain no-repeat;
  mask:var(--plant) center / contain no-repeat;
}
/* A recipe can set --plant-color, --plant-opacity, --plant-top/-bottom, --plant-left/-right and
   --plant-scale on <body> (plantStyle); a top sets the bottom to auto, a right side the left. */
.recipe-plant::before { left:var(--plant-left, 4%); right:var(--plant-right, auto); top:var(--plant-top, auto); bottom:var(--plant-bottom, -4%); transform:scaleX(-1); }

/* The moderne pin design (pin 2 · La recette): Bricolage Grotesque for the big
   titles and numbers, Epilogue for labels and text, the serif for ingredient names. */
.recipe-page {
  --display-font:'Bricolage Grotesque','Arial Black',Impact,sans-serif;
  --label-font:'Epilogue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mod-ink:#1e1c1a;
  --mod-card:rgb(255 255 255 / .85);
  --mod-shadow:0 18px 40px rgb(30 28 26 / .15);
  --accent:var(--recipe-accent, #6742be);
}
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* The format pill always sits to the right of the title; a long title breaks onto two lines instead. */
/* The pill sits on the title's baseline (its last line): the line box ends ~.095em under it. */
.title-row { --title-size:clamp(3.6rem,13vw,8.5rem); display:flex; align-items:flex-end; gap:clamp(14px,3vw,28px); }
.recipe-page .title-row h1 { font-size:var(--title-size); flex:0 1 auto; min-width:min-content; overflow-wrap:normal; word-break:normal; hyphens:manual; }
.title-row .format-pill { flex:none; margin-bottom:calc(var(--title-size) * .095); overflow-wrap:normal; word-break:normal; }
.recipe-page h1 {
  margin:0; color:var(--mod-ink); text-align:left; text-wrap:balance;
  font:800 clamp(3.6rem,13vw,8.5rem)/.84 var(--display-font); letter-spacing:-.055em;
}
.recipe-page h1 .accent-word { color:var(--accent); }
.format-pill {
  display:inline-flex; align-items:center; gap:10px; margin:0; padding:12px 20px; border-radius:999px;
  background:#fff; box-shadow:0 18px 40px rgb(30 28 26 / .07);
  color:var(--mod-ink); font:600 1rem/1.2 var(--label-font);
}
.pill-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none; }

/* The app button, as on the pins: gold pill, dark round arrow. */
.app-actions { display:flex; margin:clamp(16px,2.4vw,24px) 0 clamp(48px,7vw,80px); }
.cta-pill {
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:12px 12px 12px clamp(20px,4vw,32px); border-radius:999px; background:var(--gold);
  color:var(--mod-ink); text-decoration:none; font:600 clamp(1.05rem,2.6vw,1.3rem)/1.2 var(--label-font);
  box-shadow:var(--mod-shadow); transition:transform .2s ease, background-color .2s ease;
}
.cta-pill:hover { background:var(--gold-hover); transform:translateY(-1px); }
.cta-arrow { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--mod-ink); flex:none; }
.cta-arrow svg { width:22px; height:22px; fill:none; stroke:var(--cream); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Ingredient tiles: the name in the serif, the quantity as a big number and its unit. */
.tiles {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(var(--tiles, 3), minmax(0, 1fr)); gap:14px;
}
.tile {
  display:flex; flex-direction:column; justify-content:space-between; gap:clamp(28px,6vw,56px); min-width:0;
  padding:clamp(18px,3vw,26px); border-radius:clamp(24px,4vw,34px);
  background:var(--mod-card); box-shadow:var(--mod-shadow); color:var(--mod-ink);
}
.tile-accent { background:var(--accent); color:var(--cream); }
.tile-name { font:700 clamp(1rem,2.4vw,1.35rem)/1.15 var(--heading-font); overflow-wrap:anywhere; }
.tile-qty { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.tile-num { font:800 clamp(3rem,10vw,6.2rem)/.8 var(--display-font); letter-spacing:-.05em; }
.tile-unit { font:600 clamp(.95rem,2.2vw,1.3rem)/1.1 var(--label-font); }

/* Note and dilution, side by side as on the pin; the note takes the row when there is no dilution. */
.usage-row { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-top:14px; }
.usage-row.no-dilution { grid-template-columns:1fr; }
.note-card, .dilution-card {
  display:flex; flex-direction:column; gap:14px; min-width:0;
  padding:clamp(20px,3.4vw,30px); border-radius:clamp(24px,4vw,34px); box-shadow:var(--mod-shadow);
}
.note-card { background:var(--mod-card); color:var(--mod-ink); }
.dilution-card { background:var(--gold); color:var(--mod-ink); justify-content:space-between; }
.usage-row .label { font:600 .85rem/1 var(--label-font); letter-spacing:.08em; text-transform:uppercase; }
.note-card .label { color:var(--accent); }
.note-card p { margin:0; font:500 clamp(1.02rem,2.3vw,1.25rem)/1.35 var(--label-font); }
.dilution-card .value { font:800 clamp(2.8rem,8vw,4.6rem)/.8 var(--display-font); letter-spacing:-.05em; white-space:nowrap; }
.caution { margin:18px 0 0; text-align:right; font:400 .9rem/1.35 var(--label-font); color:var(--mod-ink); opacity:.8; }

/* The recipe list (/fr/recettes/): one card per recipe, in its accent with its plant. */
.recipe-index-page h1 { font-size:clamp(3.2rem,11vw,7rem); }
/* Gold, as on the home page's title, not a recipe's accent. */
.recipe-index-page h1 .accent-word { color:var(--gold); }
.index-lede { max-width:32em; margin:clamp(16px,2.4vw,24px) 0 clamp(36px,6vw,64px); font:500 clamp(1.02rem,2.3vw,1.25rem)/1.45 var(--label-font); color:var(--mod-ink); }
.recipe-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.recipe-card {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; min-height:clamp(260px,34vw,320px);
  padding:clamp(20px,3.4vw,30px); border-radius:clamp(24px,4vw,34px);
  background:var(--mod-card); box-shadow:var(--mod-shadow); color:var(--mod-ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.recipe-card::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-6%; bottom:-14%; width:44%; aspect-ratio:613 / 1200; transform:scaleX(-1);
  background:var(--plant-color); opacity:var(--plant-opacity, .3);
  -webkit-mask:var(--plant) center / contain no-repeat;
  mask:var(--plant) center / contain no-repeat;
}
.recipe-card:hover { transform:translateY(-3px); box-shadow:0 24px 48px rgb(30 28 26 / .2); }
.recipe-card .format-pill { align-self:flex-start; padding:9px 15px; background:var(--cream); box-shadow:none; font-size:.9rem; }
.card-label { margin:auto 0 0; padding-top:clamp(28px,5vw,48px); color:var(--accent); font:600 .85rem/1 var(--label-font); letter-spacing:.08em; text-transform:uppercase; }
.recipe-card h2 { margin:0; color:var(--mod-ink); text-wrap:balance; font:800 clamp(2.4rem,5.6vw,3.3rem)/.88 var(--display-font); letter-spacing:-.05em; }
.recipe-card h2 .accent-word { color:var(--accent); }
.recipe-card h2 a { color:inherit; text-decoration:none; }
/* The whole card is the link; the focus ring goes round the card. */
.recipe-card h2 a::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.notebook-page .recipe-card h2 a:focus-visible { outline:none; box-shadow:none; }
.recipe-card:has(a:focus-visible) { outline:3px solid var(--mod-ink); outline-offset:3px; }
.index-actions { margin:clamp(28px,4vw,40px) 0 0; }
@media (prefers-reduced-motion:reduce) {
  .recipe-card { transition:none; }
  .recipe-card:hover { transform:none; }
}

@media (max-width:760px) {
  .tiles { gap:10px; }
  .tile { gap:22px; }
  .recipe-art::before { width:calc(min(80vw, 340px) * var(--plant-scale, 1)); }
  .recipe-plant::before { left:var(--plant-left, -6%); opacity:var(--plant-opacity, .5); }
  .recipe-list { gap:12px; }
  .recipe-card .format-pill { padding:8px 13px; font-size:.85rem; }
}
/* Narrowest two-card rows: "Huile de massage · 30 ml" still on one line. */
@media (min-width:521px) and (max-width:600px) {
  .recipe-card { padding:16px; }
  .recipe-card .format-pill { padding:7px 11px; font-size:.78rem; }
}
@media (max-width:520px) {
  .usage-row { grid-template-columns:1fr; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* Phones: the title on one line, sized from its length (≤ .47em a character in this
     font, inside the 24 px gutters); the format pill goes under it. */
  .title-row { --title-size:min(3.6rem, calc((100vw - 48px) / (var(--title-len, 12) * .47))); flex-direction:column; align-items:flex-start; gap:14px; }
  .recipe-page .title-row h1 { white-space:nowrap; }
  .title-row .format-pill { margin-bottom:0; padding:10px 16px; font-size:.92rem; }
  .tiles .tile:last-child:nth-child(odd) { grid-column:1 / -1; }
  .recipe-list { grid-template-columns:1fr; }
  .recipe-card { min-height:230px; }
}