/* Lorne & Vale · product tour (fr/platform.html). Loads after lv.css and adds
   only what the tour needs beyond the shared system: a hero whose window gives
   way to the phone on small screens, the timeline of one enquiry, the triage
   field list, the list/board figure set, the module grid, and a zoom that
   keeps a readable region on phones. */

/* ---------- Hero ---------- */
.hero--prod .hero__copy{max-width:940px}
.hero--prod .h1{font-size:clamp(2.3rem,4.9vw,4.1rem)}
.hero--prod .hero__copy .lead{max-width:700px}
@media (max-width:900px){
  .hero--prod .stage{display:block;padding-bottom:8px}
  .hero--prod .stage__phone{position:relative;right:auto;bottom:auto;margin:0 auto;--pw:min(62vw,280px)}
}

/* ---------- Timeline of one enquiry ---------- */
.tl{list-style:none;max-width:1180px;margin:0 auto;border-top:1px solid var(--line)}
.tl__step{display:grid;grid-template-columns:112px minmax(0,1fr) minmax(0,1.35fr);gap:0 clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line2)}
.tl__when{display:flex;flex-direction:column;gap:6px}
.tl__t{font-family:var(--mono);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.tl__dev{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.tl__h{font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.2;letter-spacing:-.018em;font-weight:700}
.tl__p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.tl__fig{width:100%;display:flex;justify-content:center;align-items:center}
.tl__fig .win,.tl__fig .uiwrap{width:100%;max-width:600px}
.tl__fig .enq{max-width:560px;margin:0}
.tl__fig .phone{--pw:clamp(200px,20vw,260px)}
.enq--out .enq__av{background:var(--acc)}
@media (max-width:900px){
  .tl__step{grid-template-columns:110px minmax(0,1fr);gap:20px}
  .tl__fig{grid-column:1/-1}
}
@media (max-width:600px){
  .tl__step{grid-template-columns:1fr;gap:12px}
  .tl__when{flex-direction:row;align-items:baseline;gap:12px}
  .tl__fig{margin-top:6px}
}

/* ---------- Triage note: the fields, two columns ---------- */
.fields{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px}
.fields li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.fields li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.fields li b{color:var(--ink);font-weight:600}
@media (max-width:480px){.fields{grid-template-columns:1fr}}

/* ---------- List or board: a segmented control above two figures ---------- */
.figset{display:grid;gap:14px;justify-items:start}
.figset>figure{width:100%}
.figset [hidden]{display:none}
/* .figset{display:grid} above loads after lv.css's .d-only{display:none}, so at
   equal specificity the grid won and the desktop list/board pair still rendered
   on phones: a 2880px dashboard squeezed into ~350px, under the iPhone shot
   that already covers mobile. Two classes outweigh one, so the utility wins
   back. Lives here, not in platform-en.css, so the French page gets it too. */
@media (max-width:900px){.figset.d-only{display:none}}

/* ---------- Module grid ---------- */
.mods{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.mods li{background:#fff;border:1px solid var(--line2);border-radius:var(--r-md);padding:18px 20px}
.mods b{display:block;font-size:15.5px;letter-spacing:-.012em}
.mods span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--ink2)}

/* ---------- A zoom that keeps a readable region on phones ----------
   --mar --ms --mx --my override --ar --s --x --y below 900px, so a region
   that is legible on a desktop can be framed tighter on a phone. */
@media (max-width:900px){
  .zoom.zoom--m,.story .zoom.zoom--m{aspect-ratio:var(--mar,var(--ar))}
  .zoom.zoom--m img,.story .zoom.zoom--m img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:var(--mx,var(--x,50%)) var(--my,var(--y,50%));
    transform:scale(var(--ms,var(--s,1)));transform-origin:var(--mx,var(--x,50%)) var(--my,var(--y,50%))}
}