/* index page styles. Tokens live in tokens.css. */
#frimas {
    font-family:Inter, ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:var(--nuit); background:var(--papier); line-height:1.55;
    -webkit-font-smoothing:antialiased; font-size:15px;
  }
  #frimas *{box-sizing:border-box}
  #frimas .wrap{max-width:1160px;margin:0 auto;padding:0 18px}
  #frimas a{color:inherit;text-decoration:none}
  #frimas h1,#frimas h2,#frimas h3,#frimas h4{margin:0;letter-spacing:0}
  #frimas p{margin:0}
  #frimas .eyebrow{font-size:11.5px;font-weight:600;color:var(--acier);letter-spacing:0.06em;margin-bottom:14px}
  #frimas .lede{font-size:16px;color:var(--acier);max-width:60ch;line-height:1.6}
  #frimas .small{font-size:12.5px;color:var(--acier)}

  /* logo */
  #frimas .logo{position:relative;display:inline-block;font-weight:700;letter-spacing:0}
  #frimas .logo .dot{position:absolute;background:var(--stable);border-radius:1px;
    width:0.115em;height:0.115em;left:0.64em;top:0.055em}

  /* header */
  #frimas header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne-2);
    box-shadow:0 0 0 rgba(14,31,41,0);transition:box-shadow 220ms var(--ease),background 220ms var(--ease)}
  #frimas header.is-scrolled{box-shadow:0 4px 14px rgba(14,31,41,.06)}
  #frimas .bar{display:flex;align-items:center;gap:22px;height:62px}
  #frimas .bar .logo{font-size:22px}
  #frimas nav.main{display:none;gap:4px;font-size:14px;color:var(--acier);margin-left:8px}
  #frimas nav.main a{position:relative;padding:8px 2px;transition:color 160ms var(--ease)}
  #frimas nav.main a+a{margin-left:14px}
  #frimas nav.main a::after{content:"";position:absolute;left:2px;right:2px;bottom:3px;height:2px;
    background:var(--stable);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform 220ms var(--ease)}
  #frimas nav.main a:hover{color:var(--nuit)}
  #frimas nav.main a:hover::after,#frimas nav.main a[aria-current="true"]::after{transform:scaleX(1)}
  #frimas nav.main a[aria-current="true"]{color:var(--nuit)}
  #frimas .bar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
  @media(min-width:900px){#frimas nav.main{display:flex}}

  /* mobile menu */
  #frimas .menutoggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border:1px solid var(--ligne);border-radius:var(--r-md);background:transparent;cursor:pointer;
    padding:0;transition:border-color 140ms var(--ease),background 140ms var(--ease)}
  #frimas .menutoggle:hover{border-color:var(--nuit)}
  #frimas .menutoggle span{display:block;width:15px;height:1.6px;background:var(--nuit);position:relative;
    transition:background 140ms var(--ease) 60ms}
  #frimas .menutoggle span::before,#frimas .menutoggle span::after{content:"";position:absolute;left:0;
    width:15px;height:1.6px;background:var(--nuit);transition:transform 220ms var(--ease)}
  #frimas .menutoggle span::before{top:-5px}
  #frimas .menutoggle span::after{top:5px}
  #frimas .menutoggle[aria-expanded="true"] span{background:transparent}
  #frimas .menutoggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
  #frimas .menutoggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
  @media(min-width:900px){#frimas .menutoggle{display:none}}

  #frimas .mobilemenu{max-height:0;overflow:hidden;background:var(--papier);
    border-bottom:1px solid transparent;transition:max-height 260ms var(--ease),border-color 260ms var(--ease)}
  #frimas .mobilemenu.open{max-height:340px;border-bottom-color:var(--ligne-2)}
  #frimas .mobilemenu-in{display:flex;flex-direction:column;padding:6px 18px 14px}
  #frimas .mobilemenu a{padding:11px 2px;font-size:15px;color:var(--nuit);border-bottom:1px solid var(--ligne-2)}
  #frimas .mobilemenu a:last-child{border-bottom:none}
  @media(min-width:900px){#frimas .mobilemenu{display:none}}

  /* buttons */
  #frimas .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;
    font-size:14px;font-weight:600;padding:10px 18px;border-radius:var(--r-md);
    border:1px solid transparent;cursor:pointer;white-space:nowrap;
    transition:background 140ms ease-out,border-color 140ms ease-out,transform 140ms ease-out,box-shadow 140ms ease-out}
  #frimas .btn.primary{background:var(--nuit);color:var(--givre)}
  #frimas .btn.primary:hover{background:#08161E;transform:translateY(-1px);box-shadow:0 6px 14px rgba(14,31,41,.16)}
  #frimas .btn.primary:active{transform:translateY(0);box-shadow:none}
  #frimas .btn.secondary{background:transparent;color:var(--nuit);border-color:var(--ligne)}
  #frimas .btn.secondary:hover{border-color:var(--nuit);transform:translateY(-1px)}
  #frimas .btn.secondary:active{transform:translateY(0)}
  #frimas .btn.quiet{background:transparent;color:var(--acier);padding:10px 8px}
  #frimas .btn.quiet:hover{color:var(--nuit)}
  #frimas .btn.sm{font-size:12.5px;padding:7px 13px}
  #frimas .btn.lg{font-size:15px;padding:13px 24px}
  #frimas .btn.block{width:100%}
  #frimas .btn:disabled{opacity:.4;cursor:not-allowed}
  #frimas .btn:focus-visible,#frimas a:focus-visible,#frimas input:focus-visible,
  #frimas select:focus-visible,#frimas textarea:focus-visible,#frimas summary:focus-visible{
    outline:2px solid var(--stable);outline-offset:2px}

  /* hero */
  /* The brand background photograph sits under a strong dark gradient, the
     same treatment the login page uses, so the hero carries real depth while
     the light headline, the trust chips and the white booking card all stay
     readable. The gradient does the contrast work; the image is atmosphere. */
  #frimas .hero{
    background:
      linear-gradient(135deg, rgba(14,31,41,.72) 0%, rgba(10,23,30,.60) 46%, rgba(20,54,59,.52) 100%),
      url('../../public/images/login/frimas-login-background-true-logo.png') center 22%/cover no-repeat,
      var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
    color:var(--givre);padding:58px 0 0;overflow:hidden;position:relative}
  /* The gradient is lighter now so the brand photo reads through; a soft shadow
     keeps the light headline and lede legible over the brighter parts. */
  #frimas .hero h1,#frimas .hero .lede{text-shadow:0 1px 12px rgba(4,14,20,.55)}
  #frimas .hero > .wrap{position:relative;z-index:1}
  /* The brand photograph must read on mobile too, not only on desktop. On a
     tall, narrow viewport `cover` zooms a wide landscape image so hard that only
     a dark sliver came through the desktop gradient, so the hero looked flat and
     the photo seemed absent. Re-declare the same three background layers here
     (a shorthand `background` on the base rule is all-or-nothing, so it has to
     be restated, not patched) anchored to the top where the brand mark sits, and
     lighten the gradient a little so the image is clearly present while the light
     headline, the trust chips and the white booking card all stay readable. */
  @media(max-width:900px){
    #frimas .hero{
      background:
        linear-gradient(160deg, rgba(14,31,41,.68) 0%, rgba(10,23,30,.56) 52%, rgba(20,54,59,.50) 100%),
        url('../../public/images/login/frimas-login-background-true-logo.png') center top/cover no-repeat,
        var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
      padding-top:40px;
    }
  }
  @media(max-width:560px){
    #frimas .hero{
      background:
        linear-gradient(168deg, rgba(14,31,41,.72) 0%, rgba(10,23,30,.60) 55%, rgba(20,54,59,.54) 100%),
        url('../../public/images/login/frimas-login-background-true-logo.png') center top/cover no-repeat,
        var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
    }
  }
  #frimas .hero-booking{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,470px);gap:34px;align-items:start}
  #frimas .hero-copy{min-width:0}
  #frimas .hero h1{font-size:clamp(32px,7.4vw,58px);font-weight:720;line-height:1.02;max-width:16ch;
    opacity:0;animation:frimas-rise .7s .05s var(--ease) forwards}
  #frimas .hero .lede{color:#93AAB2;margin-top:16px;max-width:48ch;font-size:16px;
    opacity:0;animation:frimas-rise .7s .16s var(--ease) forwards}
  #frimas .hero-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;color:#C7D7DC;font-size:13px}
  #frimas .hero-trust span{border:1px solid rgba(189,222,222,.24);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.055)}
  #frimas .quick-book{
    background:linear-gradient(180deg,#FFFFFF 0%,#F4FAF8 100%);
    border:1px solid rgba(255,255,255,.32);border-radius:20px;padding:20px;
    box-shadow:0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.8);
    position:relative;overflow:hidden;
  }
  #frimas .quick-book::before{
    content:"";position:absolute;inset:0 0 auto;height:5px;
    background:linear-gradient(90deg,var(--stable),#8DC9D1,#D6E9A5);
  }
  #frimas .quick-stop+ .quick-stop{margin-top:12px}
  #frimas .quick-stop label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:720;text-transform:uppercase;color:var(--acier);margin-bottom:7px;letter-spacing:0}
  #frimas .quick-stop label span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--stable);color:white;font-size:12px}
  #frimas .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  #frimas .quick-actions .btn{white-space:normal;text-align:center}
  #frimas .btn.locate{
    background:#E8F6F1;color:#145D49;border-color:#B8DCD0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  }
  #frimas .btn.locate:hover{border-color:var(--stable);background:#DDF1EA;transform:translateY(-1px)}
  #frimas .btn.locate span{font-size:17px;line-height:0}
  #frimas .btn.locate .locate-ico{flex:none;margin-right:2px;vertical-align:-3px}
  #frimas .quick-book .small{margin-top:10px}
  /* Shipment choices that drive the instant estimate. */
  #frimas .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  #frimas .quick-field label{display:block;font-size:12px;font-weight:720;text-transform:uppercase;color:var(--acier);margin-bottom:6px;letter-spacing:0}
  #frimas .quick-field label span{font-weight:500;text-transform:none;color:var(--acier);opacity:.75}
  #frimas .quick-field .inp{width:100%}
  /* The estimate result card. */
  #frimas .quick-estimate{margin-top:14px;border:1px solid var(--ligne);border-radius:14px;padding:16px;background:#FFFFFF;box-shadow:0 6px 20px rgba(14,31,41,.06)}
  #frimas .quick-estimate .qe-msg{margin:0;font-size:14px;color:var(--acier)}
  #frimas .quick-estimate .qe-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
  #frimas .quick-estimate .qe-head b{font-size:15px;display:block}
  #frimas .quick-estimate .qe-head span{font-size:12px;color:var(--acier)}
  #frimas .quick-estimate .qe-total{text-align:right}
  #frimas .quick-estimate .qe-total span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--acier)}
  #frimas .quick-estimate .qe-total b{font-size:22px;font-weight:720;color:var(--nuit)}
  #frimas .quick-estimate .qe-route{margin-top:10px;font-size:13px;color:var(--nuit);font-weight:560}
  #frimas .quick-estimate .qe-dist{margin-top:2px;font-size:12px;color:var(--acier)}
  #frimas .quick-estimate .qe-lines{margin-top:12px}
  #frimas .quick-estimate .btn.block{width:100%;margin-top:14px}
  #frimas .quick-estimate .small{margin-top:10px}
  /* Readability, 2026-09-13: the breakdown was rendering in faint grey and was
     hard to read against the white card. Darken the line text, give the rows a
     little more height, and keep the total prominent, without losing the clean
     receipt look. */
  #frimas .quick-estimate .qe-lines{font-size:13.5px}
  #frimas .quick-estimate .qe-lines td{padding:7px 0;color:var(--nuit)}
  #frimas .quick-estimate .qe-lines tr.mute td{color:#33474F}
  #frimas .quick-estimate .qe-lines tr.rule td{border-top-color:var(--ligne);padding-top:10px;font-weight:560}
  #frimas .quick-estimate .qe-lines tr.total td{color:var(--nuit)}
  #frimas .quick-estimate .qe-head b{color:var(--nuit)}
  #frimas .quick-estimate .qe-head span,#frimas .quick-estimate .qe-dist,
  #frimas .quick-estimate .qe-total span{color:#485A61}
  #frimas .quick-estimate .qe-route{color:var(--nuit)}
  @media(max-width:520px){#frimas .quick-grid{grid-template-columns:1fr}}
  @media(max-width:900px){#frimas .hero-booking{grid-template-columns:1fr;gap:24px}}
  #frimas .hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
    opacity:0;animation:frimas-rise .7s .27s var(--ease) forwards}
  #frimas .hero .cta .btn{transition:background 140ms var(--ease),border-color 140ms var(--ease),
    transform 140ms var(--ease),box-shadow 140ms var(--ease)}
  #frimas .hero .btn.secondary{color:var(--givre);border-color:#31505C}
  #frimas .hero .btn.secondary:hover{border-color:var(--givre)}
  #frimas .hero .btn.primary{background:var(--givre);color:var(--nuit)}
  #frimas .hero .btn.primary:hover{background:#fff}
  #frimas .heroband{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid #24404C;
    margin-top:34px;padding:16px 0 20px;font-size:12.5px;color:#93AAB2}
  #frimas .heroband b{color:var(--givre);font-weight:600}

  /* sections */
  #frimas section{padding:56px 0}
  #frimas section.tint{background:var(--givre)}
  #frimas section.line{border-top:1px solid var(--ligne-2)}

  /* ---------- Services section depth ----------
     Same static (no-spin) truck watermark technique used on the login
     brandside panel and the dashboard welcome band (see login.html's
     .brandside::before and app.css's .welcome-band::before) -- one asset,
     one pattern, reused here so Login, Services and Dashboard read as the
     same product rather than three separate designs. It is the section's
     ::before, absolutely positioned and z-index:0; #services .wrap is given
     position:relative;z-index:1 below so the real content always paints on
     top of it, never the other way round -- see the longer version of this
     note next to .brandside::before in login.html for why that ordering
     matters. The radial glow sits on the section's own background (not a
     pseudo-element), which paints before every descendant regardless of
     z-index, so it can never end up covering text either. Both layers are
     bled into the section's own whitespace at low opacity: ambience, not
     imagery competing with the cards. */
  #frimas section#services{
    position:relative;overflow:hidden;
    background:radial-gradient(ellipse 780px 460px at 90% 102%, rgba(30,127,99,.055), transparent 70%) var(--papier);
  }
  #frimas section#services::before{
    content:'';position:absolute;z-index:0;pointer-events:none;
    right:-4%;bottom:-7%;width:min(44%,560px);aspect-ratio:2.594/1;
    background:url('../../public/images/vehicles/frimas-truck-static.svg?v=2') no-repeat right bottom/contain;
    opacity:.055;
    transform:translateY(var(--svc-parallax,0px));
    will-change:transform;
  }
  #frimas section#services > .wrap{position:relative;z-index:1}
  #frimas .service-temp-panel{
    position:relative;height:186px;margin:20px 0 8px;border-radius:8px;overflow:hidden;
    border:1px solid rgba(14,31,41,.14);
    background:
      linear-gradient(90deg,rgba(7,24,32,.78) 0%,rgba(7,24,32,.70) 48%,rgba(7,24,32,.80) 100%),
      url('../../public/images/login/frimas-login-background-true-logo.png') center 55%/cover no-repeat;
    box-shadow:0 18px 44px rgba(14,31,41,.14);
  }
  #frimas .service-temp-panel::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:44px;
    background:rgba(4,18,24,.54);border-top:1px solid rgba(127,168,176,.20);
  }
  #frimas .service-temp-graph{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
  #frimas .service-temp-truck{
    position:absolute;z-index:2;left:0;bottom:42px;width:min(210px,22vw);height:auto;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.42));
    animation:frimas-service-truck-drive 14s linear infinite;
  }
  #frimas .service-temp-line{
    stroke-dasharray:900;stroke-dashoffset:900;
    animation:frimas-temp-draw 14s linear infinite;
  }
  @keyframes frimas-temp-draw{
    0%{stroke-dashoffset:900}
    82%{stroke-dashoffset:0}
    100%{stroke-dashoffset:0}
  }
  @keyframes frimas-service-truck-drive{
    from{transform:translateX(-120%)}
    to{transform:translateX(calc(100vw + 240px))}
  }
  @media(max-width:760px){
    #frimas .service-temp-panel{height:150px;background-position:58% 50%}
    #frimas .service-temp-truck{width:180px;bottom:34px}
  }
  @media(max-width:520px){
    #frimas .service-temp-panel{height:126px}
    #frimas .service-temp-truck{width:145px;bottom:28px}
  }
  @media(max-width:900px){#frimas section#services::before{width:min(60%,380px);opacity:.045}}
  @media(max-width:640px){#frimas section#services::before{display:none}}
  @media(prefers-reduced-motion:reduce){#frimas section#services::before{transform:none}}
  #frimas h2.sec{font-size:clamp(23px,5.2vw,32px);font-weight:660;max-width:20ch}
  #frimas .grid{display:grid;gap:16px}
  @media(min-width:680px){#frimas .g2{grid-template-columns:1fr 1fr}}
  @media(min-width:900px){#frimas .g3{grid-template-columns:repeat(3,1fr)}
    #frimas .g4{grid-template-columns:repeat(4,1fr)}}
  @media(min-width:680px) and (max-width:899px){#frimas .g3,#frimas .g4{grid-template-columns:1fr 1fr}}

  #frimas .card{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--r-md);padding:18px;
    transition:transform 180ms ease-out,box-shadow 180ms ease-out}
  #frimas .card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(14,31,41,.08)}
  #frimas .card h3{font-size:16px;font-weight:620;margin-bottom:6px}
  #frimas .card p{font-size:13.5px;color:var(--acier)}
  #frimas .card .temp{font-size:12.5px;font-weight:600;margin-top:10px;font-variant-numeric:tabular-nums}
  #frimas .card .temp.chill{color:var(--stable)}
  #frimas .card .temp.froz{color:var(--ardoise)}

  /* steps */
  #frimas .steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--ligne)}
  #frimas .step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;
    border-bottom:1px solid var(--ligne)}
  #frimas .step .n{font-size:12.5px;font-weight:600;color:var(--stable);
    font-variant-numeric:tabular-nums;padding-top:2px}
  #frimas .step h3{font-size:17px;font-weight:620;margin-bottom:3px}
  #frimas .step p{font-size:14px;color:var(--acier);max-width:56ch}
  @media(min-width:900px){#frimas .steps{grid-template-columns:1fr 1fr;column-gap:40px}}

  /* record */
  #frimas .cert{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--r-md);overflow:hidden}
  #frimas .cert-top{background:var(--nuit);color:var(--givre);padding:12px 15px;display:flex;
    justify-content:space-between;align-items:baseline;gap:10px}
  #frimas .cert-top .logo{font-size:17px;color:var(--givre)}
  #frimas .cert-top small{font-size:10px;color:#93AAB2;letter-spacing:.05em;white-space:nowrap}
  #frimas .cert-body{padding:15px}
  #frimas .kv{display:grid;grid-template-columns:96px 1fr;gap:3px 10px;font-size:12.5px}
  #frimas .kv dt{color:var(--acier)}#frimas .kv dd{margin:0;font-variant-numeric:tabular-nums}
  #frimas .verdict{margin-top:12px;border-left:3px solid var(--stable);background:#F0F6F4;
    padding:9px 11px;font-size:12.5px}
  #frimas .verdict b{color:var(--stable)}

  /* faq */
  #frimas details{border-bottom:1px solid var(--ligne);padding:15px 0}
  #frimas summary{cursor:pointer;font-size:15px;font-weight:600;list-style:none;
    display:flex;justify-content:space-between;gap:14px}
  #frimas summary::-webkit-details-marker{display:none}
  #frimas summary::after{content:"+";color:var(--acier);font-weight:500}
  #frimas details[open] summary::after{content:"\2212"}
  #frimas details p{font-size:14px;color:var(--acier);margin-top:9px;max-width:66ch}

  /* forms */
  #frimas label{display:block;font-size:12px;color:var(--acier);margin-bottom:5px}
  #frimas .inp{width:100%;font:inherit;font-size:14.5px;padding:10px 11px;border:1px solid var(--ligne);
    border-radius:var(--r-md);background:#FBFDFD;color:var(--nuit)}
  #frimas textarea.inp{min-height:74px;resize:vertical}
  #frimas .inp.err{border-color:var(--ecart);background:#FEF8F6}
  #frimas .errtext{font-size:12px;color:var(--ecart);margin-top:4px}
  #frimas .field{margin-bottom:14px}
  #frimas .row2{display:grid;gap:12px}
  @media(min-width:560px){#frimas .row2{grid-template-columns:1fr 1fr}}

  /* footer */
  #frimas footer{background:var(--nuit);color:#93AAB2;padding:40px 0 28px;font-size:13.5px;
    position:relative;overflow:hidden}
  /* Bug fix, 2026-09-11: was opacity .07 at 380px -- same asset, same
     bottom-right position, but too faint to register as "the truck" (the
     brief for this pass was explicit: not that faint). Bumped to a real,
     legible presence. Anchored to footer's own box (not .wrap), so on wide
     viewports it sits mostly in the gutter outside .wrap's 1160px content
     width, and on narrower ones it settles into the real empty space below
     the shorter COMPANY/CONTACT columns (see the fgrid below) -- checked
     against actual rendered footer content, not guessed. Never overlaps
     the legal line: bottom is anchored above it (see .legal's own
     border-top below), not bled past it into the copy. Same static (no
     spin) derivative used everywhere else, same reasoning as .hero above. */
  #frimas footer::before{
    content:'';position:absolute;z-index:0;pointer-events:none;
    right:-2%;bottom:56px;width:min(34%,420px);aspect-ratio:2.594/1;
    background:url('../../public/images/vehicles/frimas-truck-static.svg?v=2') no-repeat right bottom/contain;
    opacity:.28;
  }
  #frimas footer > .wrap{position:relative;z-index:1}
  @media(max-width:900px){#frimas footer::before{width:min(40%,320px);opacity:.22}}
  @media(max-width:680px){#frimas footer::before{display:none}}
  #frimas footer .logo{color:var(--givre);font-size:20px}
  #frimas footer a:hover{color:var(--givre)}
  #frimas footer .fgrid{display:grid;gap:24px;margin-top:26px}
  @media(min-width:680px){#frimas footer .fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
  #frimas footer h4{color:var(--givre);font-size:12px;font-weight:600;letter-spacing:.05em;margin-bottom:10px}
  #frimas footer li{list-style:none;margin-bottom:6px}
  #frimas footer ul{padding:0;margin:0}
  #frimas .legal{border-top:1px solid #24404C;margin-top:28px;padding-top:16px;font-size:12px;color:#6D8891}

  /* booking overlay */
  #frimas .overlay{position:fixed;inset:0;z-index:60;
    background:var(--givre) var(--pattern-light) 0 0/var(--pattern-size) var(--pattern-size);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity 200ms ease-out,transform 200ms ease-out,visibility 0s linear 200ms}
  #frimas .overlay.on{opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity 220ms ease-out,transform 220ms ease-out}
  #frimas .obar{position:sticky;top:0;background:var(--papier);border-bottom:1px solid var(--ligne);z-index:2}
  #frimas .obar-in{display:flex;align-items:center;gap:14px;height:58px;max-width:1000px;margin:0 auto;padding:0 18px}
  #frimas .obar .logo{font-size:19px}
  #frimas .prog{display:flex;gap:4px;margin-left:auto;align-items:center}
  #frimas .prog i{width:22px;height:3px;background:var(--ligne);border-radius:2px;display:block;
    transition:background 240ms var(--ease),transform 240ms var(--ease)}
  #frimas .prog i.done{background:var(--stable)}
  #frimas .prog i.now{background:var(--nuit);transform:scaleY(1.6)}

  /* each step's content fades and slides in from the direction of travel;
     the step itself decides nothing about payment, this is purely the
     transition between two already-computed states */
  #frimas #stepPane{animation:frimas-step-in 320ms var(--ease)}
  #frimas .tile.err,#frimas .panel.err-flash{animation:frimas-shake .34s var(--ease)}
  #frimas .ostep{font-size:12.5px;color:var(--acier);white-space:nowrap}
  #frimas .obody{max-width:1000px;margin:0 auto;padding:26px 18px 100px}
  #frimas .btitle{font-size:22px;font-weight:650;margin-bottom:4px}
  #frimas .bsub{font-size:14px;color:var(--acier);margin-bottom:20px;max-width:56ch}
  #frimas .bgrid{display:grid;gap:20px}
  @media(min-width:860px){#frimas .bgrid{grid-template-columns:1fr 320px;align-items:start}}
  #frimas .panel{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--r-md);padding:18px}

  /* option tiles */
  #frimas .tiles{display:grid;gap:10px}
  @media(min-width:620px){#frimas .tiles.t2{grid-template-columns:1fr 1fr}}
  #frimas .tile{text-align:left;background:#FBFDFD;border:1px solid var(--ligne);border-radius:var(--r-md);
    padding:14px;cursor:pointer;font:inherit;transition:border-color 140ms ease-out,transform 140ms ease-out}
  #frimas .tile:hover{border-color:var(--acier);transform:translateY(-2px)}
  #frimas .tile[aria-pressed="true"]{border-color:var(--nuit);background:var(--papier);box-shadow:inset 0 0 0 1px var(--nuit)}
  #frimas .tile:disabled{opacity:.45;cursor:not-allowed;background:#F4F7F8}
  #frimas .tile .tn{font-size:15px;font-weight:620;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  #frimas .tile .tm{font-size:12.5px;color:var(--acier);margin-top:3px}
  #frimas .tile .tp{font-size:15px;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}

  /* Step 4 — vehicle image area.
     Bleeds to the tile edges (negative margin mirrors the tile's 14px padding) so the
     image zone feels like a card header rather than a floated element inside the tile.
     object-fit:contain keeps the whole vehicle visible without cropping. */
  /* The vehicle photos are 16:9. Lock the frame to the same ratio and let the
     image COVER it, so the van fills the card edge to edge with no letterbox
     and reads clearly, instead of sitting small inside a taller grey box. */
  #frimas .veh-img-wrap{
    display:block;
    margin:-14px -14px 14px;padding:0;
    aspect-ratio:16/9;max-height:230px;
    background:linear-gradient(180deg,#eef3f1 0%,var(--givre) 100%);
    border-radius:var(--r-md) var(--r-md) 0 0;
    overflow:hidden;
  }
  #frimas .veh-img-wrap img{
    width:100%;height:100%;
    object-fit:cover;object-position:center;display:block;
    transition:transform 320ms var(--ease);
  }
  #frimas .tile:hover .veh-img-wrap img{transform:scale(1.05)}

  /* Step 4 — route-grid backdrop behind the four vehicle cards.
     Reuses the existing --pattern-light token (crosshair grid + dashed diagonal +
     waypoint dots) so there is no new SVG to maintain. A thin border and subtle
     background tie the cards together without boxing them. */
  #frimas .veh-map-bg{
    background:var(--givre) var(--pattern-light);
    background-size:var(--pattern-size);
    border:1px solid var(--ligne);
    border-radius:var(--r-lg);
    padding:14px;
  }

  #frimas .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;
    padding:3px 9px;border-radius:20px}
  #frimas .badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
  #frimas .b-stable{background:#E8F2EE;color:var(--stable)}
  #frimas .b-ecart{background:#F9EBE7;color:var(--ecart)}
  #frimas .b-attente{background:#F8F1DF;color:var(--attente)}
  #frimas .b-neutre{background:#EDF1F2;color:var(--acier)}

  /* summary rail */
  #frimas .rail{position:sticky;top:80px}
  #frimas .lines{width:100%;border-collapse:collapse;font-size:13px}
  #frimas .lines td{padding:5px 0;vertical-align:top}
  #frimas .lines td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  #frimas .lines tr.mute td{color:var(--acier)}
  #frimas .lines tr.rule td{border-top:1px solid var(--ligne);padding-top:9px}
  #frimas .lines tr.total td{font-size:19px;font-weight:660;padding-top:9px}
  #frimas .lines tr.total td:first-child{font-size:13px;font-weight:500;padding-top:14px}

  #frimas .nav2{display:flex;gap:10px;margin-top:20px}
  #frimas .demo{background:#F8F1DF;border-left:3px solid var(--attente);padding:11px 13px;
    font-size:12.5px;margin-bottom:16px}
  #frimas .demo b{color:#8A6414}

  /* Payment option cards — step 7 demo payment UI */
  #frimas .pay-opts{display:flex;flex-direction:column;gap:10px}
  #frimas .pay-opt{display:flex;align-items:center;gap:14px;width:100%;
    background:var(--papier);border:1.5px solid var(--ligne);border-radius:var(--r-md);
    padding:14px 16px;cursor:pointer;text-align:left;transition:border-color 140ms var(--ease),
    background 140ms var(--ease);font-size:14px;font-family:inherit;color:var(--nuit)}
  #frimas .pay-opt:hover:not([disabled]){border-color:var(--nuit)}
  #frimas .pay-opt.selected{border-color:var(--stable);background:#F0FAF5}
  #frimas .pay-opt[disabled]{opacity:.5;cursor:not-allowed}
  #frimas .pay-icon{font-size:22px;flex-shrink:0;width:32px;text-align:center}
  #frimas .pay-text{flex:1;display:flex;flex-direction:column;gap:2px}
  #frimas .pay-text b{font-weight:620;font-size:14px}
  #frimas .pay-desc{font-size:12px;color:var(--acier);line-height:1.4}
  #frimas .pay-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;
    background:var(--stable);color:#fff;display:flex;align-items:center;
    justify-content:center;font-size:13px;font-weight:700}

  #frimas .done-mark{width:46px;height:46px;border-radius:50%;background:#E8F2EE;color:var(--stable);
    display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;
    animation:frimas-pop .5s var(--ease)}
  #frimas .bignum{font-size:26px;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:0}
  /* ── Mobile / small-screen booking overlay ──────────────────────────── */
  @media(max-width:599px){
    #frimas .quick-actions{grid-template-columns:1fr}
    /* Progress pips: shrink on mobile so 8 fit in the bar */
    #frimas .prog{gap:3px}
    #frimas .prog i{width:16px;height:3px}
    /* Step counter text: hide label on very small to save space */
    #frimas .ostep{display:none}
    /* Obar: tighter padding */
    #frimas .obar-in{padding:0 12px;height:52px;gap:10px}
    /* Body: smaller side padding, less bottom gap */
    #frimas .obody{padding:18px 12px 80px}
    /* Title / subtitle */
    #frimas .btitle{font-size:19px}
    #frimas .bsub{font-size:13px}
    /* Nav buttons: stack vertically on very narrow */
    #frimas .nav2{flex-direction:column;gap:8px}
    #frimas .nav2 .btn{width:100%;justify-content:center}
    /* Row2 fields: single column on small */
    #frimas .row2{grid-template-columns:1fr}
    /* Vehicle image: cap the height on mobile; aspect-ratio keeps it filled */
    #frimas .veh-img-wrap{max-height:200px}
    /* Payment option icon: smaller */
    #frimas .pay-icon{font-size:18px;width:26px}
    #frimas .pay-opt{padding:12px 13px;gap:11px}
  }
  @media(min-width:600px) and (max-width:859px){
    /* Tablet: show step counter, narrower pips */
    #frimas .prog i{width:18px}
    #frimas .obody{padding:22px 20px 90px}
  }

  /* On narrow mobile the header bar is too tight for both the login link and
     "Book a delivery".  Hide the login/dashboard links from the bar — they
     live in the mobile menu instead (see mobileMenu HTML), so the user still
     has access to them without the CTA button being pushed to a second line. */
  @media(max-width:560px){
    #frimas #loginLink, #frimas #dashLink { display: none }
  }

  @media(prefers-reduced-motion:reduce){
    #frimas *{transition:none!important;animation:none!important}
    #frimas .hero h1,#frimas .hero .lede,#frimas .hero .cta{opacity:1}
    #frimas .service-temp-line{stroke-dashoffset:0}
    #frimas .service-temp-truck{transform:translateX(18px)}
  }