/*
 * Theme « frais », after shop.css: utility first. A compact opening with the search, a sticky
 * bar of search + instant filters (frais.js), a dense grid (2 / 4 / 6 columns) of small square
 * pictures with a big quick « + ». Text pairs from ShopTheme: ink on paper / surface, muted and
 * brand-text on paper, brand-ink on brand, accent-ink on accent, soft-text on brand-soft.
 */
.theme-frais{background:var(--paper)}
.theme-frais .bar{background:var(--brand);color:var(--brand-ink);box-shadow:none}
.theme-frais .bar.is-stuck,.theme-frais .bar--solid{background:var(--brand);color:var(--brand-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.theme-frais.page-home .bar:not(.is-stuck) .bar__name{opacity:1;transform:none}
.theme-frais .bar__name{font-weight:800}

/* Opening */
.fr-hero{padding:76px 0 var(--s2);background:var(--brand);color:var(--brand-ink)}
.fr-hero__inner{display:grid;gap:12px}
.fr-hero__title{margin:0;font-size:calc(clamp(1.6rem,1.1rem + 2.4vw,2.8rem) * var(--display-scale,1));font-weight:800;line-height:1.05;letter-spacing:-.03em}
.fr-hero__tagline{margin:4px 0 0;font-size:var(--t-md);line-height:1.4}
.fr-hero__promise{justify-self:start;margin:0;padding:4px 12px;border-radius:var(--pill);background:var(--accent);color:var(--accent-ink);font-size:var(--t-sm);font-weight:700}
.fr-hero__search{position:relative;display:flex;align-items:center}
.fr-hero__search .ico,.fr-search .ico{position:absolute;left:14px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.fr-hero__search input,.fr-search input{width:100%;min-height:52px;padding:0 16px 0 44px;border:0;border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:var(--t-md);box-shadow:0 6px 20px -12px rgb(0 0 0 / .5)}
.fr-hero__search input:focus-visible,.fr-search input:focus-visible{outline:none;box-shadow:var(--focus)}
.fr-hero--banner{padding-bottom:var(--s1)}
@media (min-width:900px){.fr-hero{padding:96px 0 var(--s3)} .fr-hero__inner{grid-template-columns:1fr auto minmax(320px,440px);align-items:center;gap:var(--s3)} .fr-hero--banner .fr-hero__inner{grid-template-columns:1fr auto}}

/* Catalogue bar: sticky, always one tap away */
.fr-shop{padding:var(--s2) 0 var(--s4)}
.fr-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s1);margin-bottom:var(--s1)}
.fr-head__title{margin:0;font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em}
.fr-head__title em{font-family:inherit;font-style:normal;color:var(--brand-text)}
.fr-count{flex:none;color:var(--muted);font-size:var(--t-sm);font-weight:600}
.fr-bar{position:sticky;z-index:30;top:64px;margin-bottom:var(--s2);padding:10px 0;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.fr-bar__inner{display:grid;gap:8px}
.fr-search{position:relative;display:flex;align-items:center}
.fr-search input{min-height:46px;box-shadow:inset 0 0 0 1.5px var(--line)}
.fr-chips{display:flex;gap:6px;margin:0 var(--edge);padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
.fr-chips::-webkit-scrollbar{display:none}
.fr-chip{flex:none;min-height:38px;padding:0 14px;border:0;border-radius:var(--pill);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.fr-chip.is-on{background:var(--ink);color:var(--paper);box-shadow:none}
.fr-chip--label{background:var(--brand-soft);color:var(--soft-text);box-shadow:none}
.fr-chip--label.is-on{background:var(--brand);color:var(--brand-ink)}
.fr-more{display:flex;align-items:center;gap:8px}
.fr-select{min-height:38px;padding:0 10px;border:0;border-radius:var(--r-sm);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);font-size:var(--t-sm);font-weight:600}
.fr-toggle{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:var(--pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-size:var(--t-sm);font-weight:600;cursor:pointer}
.fr-toggle input{width:18px;height:18px;accent-color:var(--brand)}
@media (min-width:900px){.fr-bar__inner{grid-template-columns:minmax(220px,320px) minmax(0,1fr) auto;align-items:center} .fr-chips{margin:0;padding:0}}

/* Dense grid */
.theme-frais .fr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.theme-frais .fr-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1200px){.theme-frais .fr-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fr-card{padding:8px;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.theme-frais .card__media{aspect-ratio:var(--card-ratio,1 / 1);border-radius:calc(var(--r-md) - 4px)}
.theme-frais .card:hover .card__media{border-radius:calc(var(--r-md) - 4px);box-shadow:none}
.theme-frais .card__body{padding:8px 2px 0}
.theme-frais .card__title{--ct:var(--t-sm);font-weight:700}
.theme-frais .card__pitch{display:none}
.theme-frais .poster{padding:12% 10%}
.theme-frais .poster__name{font-size:clamp(1rem,12cqi,2rem)}
.theme-frais .card .price__now{font-size:var(--t-md)}
.theme-frais .mono{box-shadow:0 0 0 2px currentColor}
.theme-frais .btn--add{--bg:var(--brand);--fg:var(--brand-ink);width:44px;padding:0}
.theme-frais .btn--add__label{display:none}
.theme-frais .btn--add.is-added{--bg:var(--accent);--fg:var(--accent-ink)}
.fr-flag{position:absolute;z-index:1;left:6px;top:6px;padding:2px 8px;border-radius:var(--pill);background:var(--accent);color:var(--accent-ink);font-size:var(--t-xs);font-weight:800}
.fr-stock{margin:0;color:var(--muted);font-size:var(--t-xs);font-weight:600}
.fr-stock.is-low{color:var(--brand-text)}
.fr-empty{padding:var(--s4) 0;text-align:center}
.fr-empty p{margin:0 0 var(--s2);color:var(--muted)}

/* The other sections: tight */
.theme-frais .section{padding:var(--s4) 0}
.theme-frais .section__title{font-size:calc(var(--t-xl) * 1.2)}
.theme-frais .step__num{font-family:inherit;font-style:normal;font-weight:800;font-size:2.4rem}
.theme-frais .marquee{display:none}
.motion-low .theme-frais .reveal{opacity:1;transform:none}

/* Phones: no empty space between the blocks */
@media (max-width:699px){.fr-hero{padding:72px 0 12px} .fr-shop{padding:12px 0 8px} .fr-head{margin-bottom:8px} .fr-bar{margin-bottom:12px;padding:8px 0} .theme-frais .section{padding:8px 0}}
/* Signature « la vitesse » (Vivantes): no animation anywhere (no reveal, no flight to the cart), only the bar of
   the instant search (frais.js: is-run while typing, is-done when filtered) and a 100 ms press on « + ». */
.theme-frais .reveal{opacity:1;transform:none;transition:none}
.theme-frais .fly{display:none}
.fr-seekbar{position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:3px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.fr-seekbar.is-run{opacity:1;transform:scaleX(.7);transition:transform 60ms linear}
.fr-seekbar.is-done{transform:scaleX(1);opacity:0;transition:transform 80ms linear,opacity 200ms linear 120ms}
html:not(.motion-low) .theme-frais [data-add]{transition:transform 100ms ease-out}
html:not(.motion-low) .theme-frais [data-add]:active{transform:scale(.9)}
html:not(.motion-low) .theme-frais [data-add].is-added{animation:fr-tap 100ms ease-out}
@keyframes fr-tap{50%{transform:scale(.88);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 35%,transparent)}}