/* Prime Freight design system v1 (Oct 2026) — tokens, primitives and the shared chrome.
   Spec: notes/redesign-v1/UIUX.md. Page-specific layout lives in its own stylesheet
   (home.css); anything two pages need belongs here. Fonts are self-hosted so CSP 'self'
   covers them and no visitor IP reaches a font CDN. */

@font-face{font-family:"Geist";src:url("/assets/fonts/geist-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* brand */
  --pf-blue:#2A2A8C;--electric:#4651F0;--electric-hover:#5A64FF;--electric-press:#3A43D6;
  --sky:#9FB4FF;--mist:#E7EAFE;--periwinkle:#DCE2FF;
  /* ink (dark surfaces) */
  --ink-950:#060A1C;--ink-900:#0A0F26;--ink-875:#0A1028;--ink-850:#0E1430;--ink-800:#161E44;
  --line-dark:#1C2448;--line-strong:#2A3360;
  /* paper (light surfaces) */
  --white:#FFFFFF;--paper-100:#F2F4F9;--paper-line:#E2E5EE;--paper-400:#C3C8D8;
  --slate:#4A516E;--ink-text:#0A0E24;--label:#6C7493;
  /* text on dark */
  --on-dark:#FFFFFF;--on-dark-nav:#E6E9F5;--on-dark-body:#B7BED8;--on-dark-2:#A7AECB;--on-dark-cap:#8A91AE;
  /* status */
  --live:#37CD84;--warn-bg:#FFF3E0;--warn-text:#8A4B00;
  /* type */
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-display:clamp(47px,7.36vw,106px); /* mock renders the 116 spec at ~106 */--fs-h2:clamp(36px,4.45vw,64px);--fs-h3:clamp(32px,3.06vw,44px);
  --fs-title:clamp(22px,1.8vw,26px);--fs-body-l:19px;
  /* layout */
  --gutter:clamp(20px,4vw,48px);--container:1320px;--section-y:clamp(72px,9vw,120px);
  --r-chip:4px;--r-tab:8px;--r-bar:12px;--r-card:14px;--r-menu:18px;--r-pill:999px;
  --shadow-light:0 1px 2px rgba(10,14,36,.04),0 12px 32px rgba(10,14,36,.06);
  --shadow-dark:0 24px 64px rgba(0,0,0,.45);
  --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Legacy token names, mapped onto this palette. widgets.js (consent bar, chat), the islands and
   site.css all read these; defining them here re-skins every one of them without touching it.
   Delete a name only once nothing reads it (grep `var(--name`). */
:root{
  --page:var(--white);--surface:var(--paper-100);--text:var(--ink-text);--muted:var(--slate);
  --line:var(--paper-line);--ink:var(--ink-text);--tint:var(--paper-100);--tint-2:var(--mist);
  --indigo:var(--electric);--indigo-bright:var(--electric);--indigo-deep:var(--pf-blue);--indigo-night:var(--ink-900);
  --peri:var(--sky);--peri-soft:var(--mist);--pill:var(--paper-100);--input:var(--white);--placeholder:#8A91AE;
  --sans:var(--font);--display:var(--font);
}

/* ── base ─────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink-950);-webkit-text-size-adjust:100%}
/* Anchor targets must clear the sticky chrome, else the eyebrow + heading land under it.
   --sticky-h is the total sticky stack; pages that add a second sticky bar declare it. */
:where([id]){scroll-margin-top:calc(var(--sticky-h, var(--nav-h)) + 24px)}
body{margin:0;min-width:320px;overflow-x:clip;background:var(--white);color:var(--ink-text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Every page, every heading: a heading's last line was often one word ("moves.", "lane.", "data.")
   because only the redesign's own classes balanced. Short uppercase labels and eyebrows balance
   too ("…QUI EXPÉDIENT" / "AVEC"). Browsers without text-wrap ignore it. */
:is(h1,h2,h3,h4,.display,.pf-label,.pf-eyebrow,.eyebrow){text-wrap:balance}
:is(p,li,dd,figcaption){text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--electric-hover);outline-offset:3px;border-radius:6px}
html.pf-menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.pf-wrap{width:min(var(--container),calc(100% - 2 * var(--gutter)));margin-inline:auto}
/* The footer always starts below the fold: pages that fill in asynchronously (market signals,
   help) would otherwise shove an on-screen footer down — layout shift — and short pages get a
   footer that sits at the bottom instead of mid-screen. */
main{min-height:calc(100vh - var(--nav-h))}
.pf-skip{position:fixed;top:8px;left:8px;z-index:100;padding:10px 16px;border-radius:var(--r-pill);background:var(--white);color:var(--ink-text);font-weight:500;transform:translateY(-200%);transition:transform .15s}
.pf-skip:focus{transform:none}
.pf-skip-target{outline:0}
.pf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pf-dark{background:var(--ink-950);color:var(--on-dark-body);color-scheme:dark}
.pf-paper{background:var(--paper-100)}
/* A white surface inside a .pf-dark section (the hero's search card). color-scheme inherits, so
   without this the browser drew the card's native parts in dark mode on white: a black scrollbar
   in the port dropdown, a dark date picker and autofill. */
.pf-light{color-scheme:light}

/* Inner scroll areas (the port dropdown, the agent list, wide tables, code samples): a slim pill
   thumb, inset from the edge, on no track; darker under the pointer. The page's own scrollbar (the
   root's) is left to the platform. Chrome and Safari draw it with ::-webkit-scrollbar; Chrome
   ignores those whenever scrollbar-color/-width are set, so the standard properties are kept to
   the browsers without them (Firefox). */
body,.pf-light{--scroll-thumb:rgba(10,14,36,.2);--scroll-thumb-hover:rgba(10,14,36,.38)}
.pf-dark{--scroll-thumb:rgba(255,255,255,.24);--scroll-thumb-hover:rgba(255,255,255,.42)}
:where(body *)::-webkit-scrollbar{width:10px;height:10px}
:where(body *)::-webkit-scrollbar-track,:where(body *)::-webkit-scrollbar-corner{background:transparent}
:where(body *)::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:var(--scroll-thumb) padding-box}
:where(body *)::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
@supports not selector(::-webkit-scrollbar){
  body,.pf-light,.pf-dark{scrollbar-color:var(--scroll-thumb) transparent}
  body *{scrollbar-width:thin}
}

/* ── type ─────────────────────────────────────────────────────────────────────── */
.pf-display,.pf-h2,.pf-h3,.pf-title{margin:0;color:var(--ink-text);font-weight:420;text-wrap:balance}
.pf-dark :is(.pf-display,.pf-h2,.pf-h3,.pf-title){color:var(--on-dark)}
.pf-display{font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em}
.pf-h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.04em}
.pf-h3{font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.035em}
.pf-title{font-size:var(--fs-title);font-weight:450;line-height:1.2;letter-spacing:-.02em}
.pf-lede{margin:0;font-size:var(--fs-body-l);line-height:1.5;color:var(--slate)}
.pf-dark .pf-lede{color:var(--on-dark-body)}
.pf-eyebrow{margin:0;font:400 13px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--pf-blue)}
.pf-dark .pf-eyebrow,.pf-footer .pf-eyebrow{color:var(--sky)}
.pf-label{margin:0;font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.pf-dark .pf-label,.pf-footer .pf-label{color:var(--on-dark-cap)}

/* ── buttons ──────────────────────────────────────────────────────────────────── */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-pill);font:500 16px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.pf-btn--sm{min-height:36px;padding:0 16px;font-size:14px}
.pf-btn--block{width:100%}
.pf-btn--primary{background:var(--electric);color:var(--white)}
.pf-btn--primary:hover{background:var(--electric-press)}
.pf-dark .pf-btn--primary:hover{background:var(--electric-hover)}
.pf-btn--white{background:var(--white);color:var(--ink-text)}
.pf-btn--white:hover{background:var(--periwinkle)}
.pf-btn--ink{background:var(--ink-text);color:var(--white)}
.pf-btn--ink:hover{background:var(--pf-blue)}
.pf-btn--outline{border-color:var(--line-strong);background:transparent;color:var(--on-dark)}
.pf-btn--outline:hover{border-color:var(--sky)}
.pf-btn--ghost{border-color:rgba(255,255,255,.55);background:transparent;color:var(--white)} /* outline on the brand band */
.pf-btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.pf-btn .pf-icon{flex:none}
.pf-link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--pf-blue);transition:color .18s var(--ease)}
.pf-link:hover{color:var(--electric)}
.pf-dark .pf-link{color:var(--on-dark)}
.pf-dark .pf-link:hover{color:var(--sky)}

/* ── EN/FR switch ─────────────────────────────────────────────────────────────── */
/* site.css still styles the footer's .lang-switch pill, so every property it sets is restated here;
   ds.css loads after it and wins at equal specificity. */
.pf-lang{display:inline-flex;gap:2px;overflow:visible;padding:3px;border:1px solid var(--line-dark);border-radius:var(--r-pill);background:transparent}
.pf-lang button{min-width:32px;min-height:0;height:26px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--on-dark-cap);font:500 11px/1 var(--mono);letter-spacing:.04em;transition:background-color .18s,color .18s}
.pf-lang button:hover{color:var(--on-dark)}
.pf-lang button[aria-pressed="true"]{background:var(--white);color:var(--ink-text)}
.pf-lang--center{align-self:center;margin-top:8px}
.pf-lang--plain{padding:0;border:0}
.pf-lang--plain button[aria-pressed="true"]{background:transparent;color:var(--on-dark)}

/* ── header ───────────────────────────────────────────────────────────────────── */
.pf-nav{position:sticky;top:0;z-index:50;height:var(--nav-h);border-bottom:1px solid rgba(255,255,255,.06);background:var(--ink-950);color:var(--on-dark-nav)}
.pf-nav-inner{display:flex;align-items:center;gap:28px;height:100%}
.pf-brand{flex:none;display:inline-flex}
.pf-brand img{width:auto;height:44px;object-fit:contain}
.pf-nav-links{display:flex;align-items:center;gap:2px}
.pf-nav-item{position:relative}
.pf-nav-top{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:var(--r-pill);color:var(--on-dark-nav);font-size:15px;transition:background-color .18s,color .18s}
.pf-nav-top::after{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.pf-nav-item:focus-within .pf-nav-top,.pf-nav-item.is-open .pf-nav-top,.pf-nav-top.is-current{background:var(--ink-800);color:var(--on-dark)}
.pf-drop{position:absolute;top:calc(100% + 10px);left:-8px;display:flex;gap:8px;padding:8px;border:1px solid var(--line-dark);border-radius:var(--r-menu);background:var(--ink-850);box-shadow:var(--shadow-dark);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s}
.pf-drop::before{content:"";position:absolute;inset:-12px 0 auto;height:12px} /* hover bridge across the gap */
.pf-nav-item:focus-within .pf-drop,.pf-nav-item.is-open .pf-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Hover opens a menu only where hover is real. A touch screen keeps the last-tapped element in
   :hover ("sticky hover"), so there a menu would outlive Tab or a close: touch opens by tap
   (.is-open, site.js) and closes when focus or a tap goes elsewhere. */
@media (hover:hover){
  .pf-nav-item:hover .pf-nav-top{background:var(--ink-800);color:var(--on-dark)}
  .pf-nav-item:hover .pf-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
.pf-nav-item.is-dismissed .pf-drop{opacity:0;visibility:hidden}
.pf-drop-cols{display:flex;gap:8px;padding:8px 4px}
.pf-drop-col{display:flex;flex-direction:column;min-width:186px}
.pf-col-h{margin:6px 12px 10px;font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-cap)}
.pf-drop-col a{padding:9px 12px;border-radius:10px;color:var(--on-dark-nav);font-size:16px;line-height:1.3;white-space:nowrap;transition:background-color .15s,color .15s}
.pf-drop-col a:hover,.pf-drop-col a:focus-visible{background:var(--ink-800);color:var(--on-dark)}
.pf-feature{display:flex;flex-direction:column;width:200px;min-height:244px;padding:18px 18px 20px;border-radius:var(--r-bar);background:var(--electric);color:var(--white);transition:background-color .18s var(--ease)}
.pf-feature:hover{background:var(--electric-press)}
.pf-feature-eyebrow{font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pf-feature-copy{margin-top:auto;font-size:13px;line-height:1.45;color:rgba(255,255,255,.9)}
.pf-feature-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:19px;letter-spacing:-.01em}

.pf-nav-actions{display:flex;align-items:center;gap:20px;margin-left:auto}
.login-item{position:relative}
.login-item .login{display:inline-flex;align-items:center;min-height:36px;color:var(--on-dark-nav);font-size:15px;transition:color .18s}
.login-item .login:hover{color:var(--on-dark)}
.login-item .nav-drop{position:absolute;top:calc(100% + 10px);right:-12px;display:flex;flex-direction:column;min-width:200px;padding:8px;border:1px solid var(--line-dark);border-radius:14px;background:var(--ink-850);box-shadow:var(--shadow-dark);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.login-item .nav-drop::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.login-item:hover .nav-drop,.login-item:focus-within .nav-drop{opacity:1;visibility:visible;transition-delay:0s}
.login-item .nav-drop a{padding:10px 12px;border-radius:10px;color:var(--on-dark-nav);font-size:15px}
.login-item .nav-drop a:hover{background:var(--ink-800);color:var(--on-dark)}
.pf-menu-btn{display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--on-dark)}
.pf-menu-close{display:none}
.pf-menu-btn[aria-expanded="true"] .pf-menu-open{display:none}
.pf-menu-btn[aria-expanded="true"] .pf-menu-close{display:block}

/* mobile menu (< 1000px) */
.pf-mmenu{position:fixed;inset:var(--nav-h) 0 0;z-index:49;overflow-y:auto;overscroll-behavior:contain;background:var(--ink-950)}
.pf-mmenu[hidden]{display:none}
.pf-mmenu-inner{display:flex;flex-direction:column;min-height:100%;padding:8px 0 32px}
.pf-m-item{border-bottom:1px solid var(--line-dark)}
.pf-m-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 0;border:0;background:transparent;color:var(--on-dark);font-size:26px;font-weight:420;letter-spacing:-.02em;text-align:left}
.pf-m-sign{position:relative;width:16px;height:16px;color:var(--sky)}
.pf-m-sign::before,.pf-m-sign::after{content:"";position:absolute;inset:7px 0 auto;height:1.6px;border-radius:1px;background:currentColor;transition:transform .2s var(--ease)}
.pf-m-sign::after{transform:rotate(90deg)}
.pf-m-trigger[aria-expanded="true"] .pf-m-sign::after{transform:rotate(0)}
.pf-m-panel{padding:0 0 20px}
.pf-m-col{display:flex;flex-direction:column;margin-bottom:12px}
.pf-m-col .pf-col-h{margin:8px 0 6px}
.pf-m-col a{padding:7px 0;color:var(--on-dark-nav);font-size:17px}
.pf-m-panel .pf-feature{width:100%;min-height:0;margin-top:8px}
.pf-m-panel .pf-feature-copy{margin-top:0}
.pf-m-panel .pf-feature-eyebrow{display:none}
.pf-m-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:32px}
.pf-m-account{display:flex;flex-direction:column;gap:10px}
/* signed in: portalSession.mjs replaces the two links with a single a.login "Portal" */
.pf-m-account .login{display:flex;justify-content:center;min-height:48px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--on-dark);font-size:16px;font-weight:500}

/* Under each item (as drawn) only while there is room: below 1280px the Resources menu would run
   off the right edge, so every menu anchors to the start of the link row instead. */
@media (max-width:1279px){
  .pf-nav-links{position:relative}
  .pf-nav-item{position:static}
}
@media (max-width:999px){
  .pf-nav-links,.pf-nav-actions>.pf-lang,.pf-nav-actions>.login-item{display:none}
  .pf-menu-btn{display:grid}
  .pf-nav-actions{gap:10px}
  .pf-brand img{height:40px}
}
/* A phone row holds the logo, "Get rates" and the menu button. The French label ("Obtenir des
   tarifs") leaves no room for the full 120px logo below ~390px, so there the logo scales down
   instead of the row pushing the whole page sideways. */
@media (max-width:419px){
  .pf-nav-inner{gap:16px}
  .pf-nav .pf-brand{flex:0 1 auto;min-width:0}
  .pf-nav .pf-brand img{width:100%;max-width:120px;height:auto}
}
@media (min-width:1000px){.pf-mmenu{display:none!important}}
/* Without site.js (blocked or failed) the menu button can open nothing, so a phone would have no
   navigation at all. html.js is set only by site.js; without it the menu renders inline. */
@media (max-width:999px){
  html:not(.js) .pf-menu-btn{display:none}
  html:not(.js) .pf-nav{position:static;height:auto}
  html:not(.js) .pf-nav-inner{height:var(--nav-h)}
  html:not(.js) .pf-mmenu[hidden],html:not(.js) .pf-m-panel[hidden]{display:block}
  html:not(.js) .pf-mmenu{position:static;overflow:visible}
}
/* widgets.js floats the chat launcher (z 80) and consent bar (z 90) above everything; while the
   full-screen menu is open they would sit on its buttons. Same stand-aside it does for the picker.
   Front's own iframe floats there too and styles itself inline, hence !important. */
html.pf-menu-open :is(.pf-chat-btn,.pf-chat-panel,.pf-consent,#front-chat-iframe){visibility:hidden!important}

/* Google's reCAPTCHA badge parks bottom-right, under the chat launcher, on every page: hidden in
   effect, without the notice Google then requires. So it is hidden outright, and every form that
   sends a captcha token shows that notice (.pf-recaptcha-note: forms.js + <RecaptchaNotice>).
   visibility, not display: reCAPTCHA keeps working with a hidden badge, which Google allows. */
.grecaptcha-badge{visibility:hidden!important}
.pf-recaptcha-note{flex-basis:100%;grid-column:1/-1;margin:10px 0 0;font-size:12px;line-height:1.45;color:inherit;opacity:.72}
.pf-recaptcha-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Service pages' copy blocks (.svc-copy, 12 pages): paragraphs carry a bottom margin, the heading
   none, so each heading sat directly on the paragraph under it. */
.svc-copy>.display{margin-bottom:18px}


/* ── footer ───────────────────────────────────────────────────────────────────── */
/* The bottom padding clears the floating chat launcher (Front's bubble, or widgets.js's fallback:
   fixed 20px from the bottom-right, ~60px tall). With 28px, scrolling to the end parked the
   launcher exactly over the EN/FR switch, so a click there opened chat instead of switching. */
.pf-footer{padding:var(--section-y) 0 104px;background:var(--ink-900);color:var(--on-dark-body)}
.pf-footer .pf-brand img{height:44px}
.pf-foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
/* No signup (the ungated tool pages): the logo alone held a column sized for the form, a big empty
   block beside the links. The column shrinks to the logo and the links take the width. */
.pf-foot-top--compact{grid-template-columns:auto minmax(0,1fr)}
.pf-foot-news .pf-eyebrow{margin-top:48px}
.pf-foot-h{margin:16px 0 24px;color:var(--on-dark);font-size:clamp(36px,3.6vw,52px);font-weight:420;line-height:1.02;letter-spacing:-.04em}
.pf-pill-input{display:flex;align-items:center;gap:8px;max-width:440px;padding:6px 6px 6px 22px;border-radius:var(--r-pill);background:var(--white)}
.pf-pill-input input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--ink-text);font-size:16px;outline:0}
.pf-pill-input input::placeholder{color:#7A819D}
.pf-pill-input:focus-within{box-shadow:0 0 0 3px rgba(90,100,255,.45)}
.pf-pill-input .pf-btn{min-height:44px;padding:0 22px}
/* 360px phones: "Courriel professionnel" ran 4px past the field and was cut. The text stays 16px
   (smaller makes iOS zoom on focus), so the room comes out of the padding. */
@media (max-width:380px){.pf-pill-input{padding-left:16px}.pf-pill-input .pf-btn{padding:0 16px}}
.pf-foot-note{margin:14px 0 0;color:var(--on-dark-cap);font-size:13px}
.pf-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pf-foot-col{display:flex;flex-direction:column;gap:14px}
.pf-foot-col .pf-col-h{margin:4px 0 6px}
.pf-foot-col a{color:var(--on-dark-nav);font-size:16px;transition:color .15s}
.pf-foot-col a:hover{color:var(--sky)}
.pf-foot-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:88px;padding-top:32px;border-top:1px solid var(--line-dark)}
.pf-foot-contact .pf-label{margin-bottom:12px}
.pf-foot-contact address{font-style:normal;color:var(--on-dark-nav);font-size:17px;line-height:1.45}
.pf-phone{color:var(--on-dark);font-size:26px;letter-spacing:-.01em;transition:color .15s}
.pf-phone:hover{color:var(--sky)}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--on-dark-nav);font-size:15px;transition:background-color .15s,border-color .15s,color .15s}
.pf-chip:hover{border-color:var(--electric);background:var(--electric);color:var(--white)}
.pf-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dark)}
.pf-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;color:var(--on-dark-cap);font-size:14px}
.pf-legal a{transition:color .15s}
.pf-legal a:hover{color:var(--on-dark)}
.pf-footer .form-status.is-success{color:var(--live)}
.pf-footer .form-status.is-error{color:#FFB4AB}

/* minmax(0,…), never a bare 1fr: a bare 1fr track cannot shrink below its content, and the link
   columns' longest labels ("Financement commercial") made the footer 373px wide on a 360px phone —
   sideways scroll on the homepage, a clipped right column everywhere site.css clips the footer. */
@media (max-width:999px){
  .pf-foot-top{grid-template-columns:minmax(0,1fr)}
  .pf-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .pf-foot-contact{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:56px}
}
@media (max-width:599px){
  .pf-foot-bottom{flex-direction:column;align-items:flex-start}
}