/*
 * La boutique (V8-99, P17-13 → P17-16) — les codes d'une boutique en ligne, sans vendre (C9-R01).
 * Porté du kit maquette.css §20 : jetons seulement (--brand-*), aucune couleur en dur ; mobile d'abord, le
 * gabarit large (H1) et les colonnes arrivent à 992 px. Tailles ≥ .75rem sur téléphone (charte § 5 quater).
 */

/* ------------------------------------------------------------------ */
/* 1. La recherche en tête                                              */
/* ------------------------------------------------------------------ */
.shop-search { position: relative; }
.shop-search .form-control { height: 2.9rem; padding-left: 2.75rem; padding-right: 5.4rem; border-radius: var(--brand-radius-btn); font-size: .95rem; border-color: var(--brand-line); background: var(--brand-surface); }
.shop-search .ss-ico { position: absolute; left: .35rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--brand-muted); font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.shop-search .ss-ico:hover, .shop-search .ss-ico:focus-visible { background: color-mix(in srgb, var(--brand-accent) 14%, transparent); }
.shop-search .ss-filter { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); border: 1px solid var(--brand-line); background: var(--brand-surface); border-radius: 10px; padding: .35rem .6rem; color: var(--brand-secondary); font-size: .78rem; font-weight: 800; line-height: 1.2; text-decoration: none; }
.hero .shop-search .form-control { border-color: transparent; }

/* ------------------------------------------------------------------ */
/* 2. L'accueil : sections, rails, tuiles                               */
/* ------------------------------------------------------------------ */
.shop-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 1rem 0 .55rem; }
.shop-section-head h2 { font-size: 1.25rem; margin: 0; color: var(--brand-secondary); }
.shop-section-head a { font-size: .8rem; font-weight: 800; color: var(--brand-accent-deep); white-space: nowrap; }
.shop-section-tools { display: flex; align-items: center; gap: .7rem; }
/* Les flèches d'un rail (bureau) : une page de quatre cartes par touche ; grisées en bout, cachées sans débordement */
.shop-rail-nav { gap: .3rem; }
.rail-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--brand-line); background: var(--brand-surface); color: var(--brand-secondary); font-size: 1.1rem; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rail-btn:hover, .rail-btn:focus-visible { border-color: var(--brand-accent); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.shop-rail { display: flex; align-items: stretch; gap: .6rem; overflow-x: auto; padding: .1rem 0 .5rem; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.shop-rail::-webkit-scrollbar { display: none; }
.shop-rail > .pcard { flex: 0 0 46%; scroll-snap-align: start; }
.shop-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.shop-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 112px; border-radius: 16px; overflow: hidden; border: 1px solid var(--brand-line); background: var(--brand-surface); padding: .6rem .7rem; color: var(--brand-secondary); }
.shop-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, color-mix(in srgb, var(--brand-surface) 94%, transparent) 68%); }
.shop-tile b, .shop-tile small { position: relative; z-index: 1; }
.shop-tile b { font-family: var(--brand-font-display); font-size: 1.1rem; line-height: 1.1; font-weight: 600; }
.shop-tile small { font-size: .78rem; color: var(--brand-muted); font-weight: 700; }
.shop-foot { font-size: .8rem; text-align: center; color: var(--brand-muted); margin: 1rem 0 .5rem; }

/* Le « ‹ retour » dans le hero sur la coquille publique (la cliente, la vitrine — sa barre n'en a pas) : en clair sur le bleu */
.hero .hero-back { display: inline-block; margin: -.35rem 0 .5rem -.5rem; padding: .3rem .5rem; border-radius: 10px; font-weight: 700; font-size: .92rem; color: var(--brand-on-dark); }
.hero .hero-back:hover, .hero .hero-back:focus-visible { color: var(--brand-on-dark); background: color-mix(in srgb, var(--brand-on-dark) 14%, transparent); }
.hero .hero-sub { max-width: 440px; }

/* Le hero de l'accueil (les trois publics — retour d'Axel du 25/09) : le texte et la recherche ; en bureau, trois visuels à droite (P17-16 ①) */
.hero-shop { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; }
.hero-shop .hero-sub { max-width: 440px; }
.hero-shop .shop-search { max-width: 440px; }
.hero-shop-visual { display: flex; gap: .6rem; justify-content: flex-end; }
.hero-shop-visual img { width: 118px; height: 118px; object-fit: contain; background: var(--brand-surface); border-radius: 16px; padding: 6px; }
.hero-shop-visual img:nth-child(2) { transform: translateY(-14px); }

/* ------------------------------------------------------------------ */
/* 3. La carte produit — toutes les cartes ont la même hauteur          */
/*    (règle d'Axel, 25/09/2026) : chaque zone a une hauteur fixe        */
/*    (visuel carré, marque 1 ligne, nom 2 lignes réservées, sous-titre  */
/*    1 ligne, prix 1 ligne, points 1 ligne réservée), ce qui déborde    */
/*    est coupé par une ellipse, jamais une ligne de plus ; les cartes   */
/*    s'étirent à la hauteur de leur rangée ou de leur rail.             */
/* ------------------------------------------------------------------ */
/* V8-70 : la carte est un bloc, le lien de la fiche (.pc-link, relay.css) et le « ＋ » de la cliente sont côte à côte dedans */
.pcard { position: relative; display: flex; flex-direction: column; width: 100%; border: 1px solid var(--brand-line); border-radius: 16px; background: var(--brand-surface); overflow: hidden; text-align: left; color: var(--brand-text); transition: box-shadow .15s ease-in-out; }
.pcard:hover, .pcard:focus-within { box-shadow: var(--bs-box-shadow-sm); color: var(--brand-text); }
.shop-grid > .col { display: flex; }
.pcard .pc-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--brand-surface); padding: 8%; border-bottom: 1px solid var(--brand-line-soft); }
.pcard .pc-img img { width: 100%; height: 100%; object-fit: contain; }
.pc-none { font-size: .75rem; color: var(--brand-muted); font-weight: 700; }
.pc-badges { position: absolute; top: .4rem; left: .4rem; display: flex; flex-direction: column; gap: .2rem; z-index: 1; }
.pc-badge { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: var(--brand-radius-pill); background: var(--brand-secondary); color: var(--brand-on-dark); }
.pc-badge-new { background: var(--brand-accent); color: var(--brand-secondary); }
.pc-badge-off { background: var(--brand-line-soft); color: var(--brand-muted); }
.pcard .pc-body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; padding: .5rem .6rem .6rem; }
.pcard .pc-brand, .pcard .pc-sub, .pcard .pc-price, .pcard .pc-points { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pc-brand { font-size: .75rem; line-height: 1.45; min-height: 1.45em; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--brand-muted); }
.pcard .pc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--brand-font-display); font-size: 1.05rem; line-height: 1.15; min-height: 2.3em; color: var(--brand-secondary); font-weight: 600; }
.pcard .pc-sub { font-size: .8rem; line-height: 1.5; min-height: 1.5em; color: var(--brand-muted); }
.pcard .pc-price { margin-top: auto; padding-top: .3rem; font-size: .95rem; line-height: 1.3; font-weight: 800; color: var(--brand-secondary); }
.pcard .pc-price small { font-size: .78rem; font-weight: 600; color: var(--brand-muted); margin-right: .2rem; }
/* AJUST-32 : le prix public barré à la suite du prix consultante (membre) — plus petit, grisé, sur la même ligne */
.pcard .pc-price s { font-size: .78rem; font-weight: 600; color: var(--brand-muted); margin-left: .15rem; }
.pcard .pc-points { font-size: .78rem; line-height: 1.5; min-height: 1.5em; font-weight: 800; color: var(--brand-accent-deep); }
.pcard .pc-cta { margin: 0 .6rem .6rem; }
.pcard.is-off .pc-img img { opacity: .45; filter: grayscale(1); }
.pcard.is-off .pc-cta { opacity: .5; }

/* ------------------------------------------------------------------ */
/* 4. La liste : barre tri / filtres, tri, filtres actifs, feuille       */
/* ------------------------------------------------------------------ */
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .5rem; margin: .55rem 0 .7rem; font-size: .82rem; color: var(--brand-muted); font-weight: 600; }
.shop-toolbar .tb-btns { display: flex; gap: .4rem; flex: 0 0 auto; }
.tb-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: var(--brand-radius-pill); border: 1px solid var(--brand-line); background: var(--brand-surface); color: var(--brand-secondary); font-weight: 700; font-size: .8rem; line-height: 1.3; cursor: pointer; }
.tb-btn .n { background: var(--brand-secondary); color: var(--brand-on-dark); border-radius: var(--brand-radius-pill); font-size: .7rem; padding: .05rem .4rem; }
.shop-sort { position: relative; }
.shop-sort summary { list-style: none; }
.shop-sort summary::-webkit-details-marker { display: none; }
.shop-sort-menu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; min-width: 12rem; padding: .3rem; border-radius: 12px; border: 1px solid var(--brand-line); background: var(--brand-surface); box-shadow: var(--bs-box-shadow); }
.shop-sort-menu a { display: block; padding: .5rem .7rem; border-radius: 8px; font-size: .85rem; font-weight: 700; color: var(--brand-text); }
.shop-sort-menu a.active { background: var(--brand-secondary); color: var(--brand-on-dark); }
.chip .x { margin-left: .3rem; opacity: .7; }
a.chip { color: var(--brand-text); }
a.chip.active { color: var(--brand-on-dark); }

/* La feuille des filtres : des puces cochables (le formulaire GET reste un formulaire) */
.filter-group { padding: .7rem 0; border-bottom: 1px solid var(--brand-line-soft); }
.filter-group h4 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-muted); margin: 0 0 .45rem; font-family: var(--brand-font-body); font-weight: 800; }
.filter-group .chips { flex-wrap: wrap; overflow: visible; }
.shop-filters .chip { position: relative; cursor: pointer; margin: 0; }
.shop-filters .chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.shop-filters .chip:has(input:checked) { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-dark); }
.shop-filters .chip:has(input:focus-visible) { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.shop-filters-form { width: 100%; }
/* AJUST-39 (retour #2420) : en bureau, catalog.js applique les filtres dès la coche et marque le formulaire — le bouton
   « Voir n produits » n'a plus lieu d'être ; sans JavaScript, pas de marque : il reste et valide. */
@media (min-width: 992px) {
    .shop-filters-form[data-filter-live] [data-filter-count] { display: none; }
}
.shop-list-main { min-width: 0; }

/* La pagination de la boutique (P17-14) : des pastilles rondes, la page courante en sombre */
.shop-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 .4rem; font-size: .88rem; font-weight: 700; color: var(--brand-muted); }
.shop-pager .pg { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--brand-line); background: var(--brand-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--brand-secondary); }
.shop-pager a.pg:hover, .shop-pager a.pg:focus-visible { border-color: var(--brand-accent); color: var(--brand-secondary); }
.shop-pager .pg.active { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-dark); }
.shop-pager .pg.dots { width: auto; border: 0; background: transparent; color: var(--brand-muted); }
.shop-pager .pg.is-off { opacity: .35; }

/* ------------------------------------------------------------------ */
/* 5. La fiche : galerie, en-tête, prix, contenances, sections           */
/* ------------------------------------------------------------------ */
.shop-gallery { background: var(--brand-surface); border-radius: 18px; border: 1px solid var(--brand-line); overflow: hidden; }
.shop-gallery .g-main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.shop-gallery .g-main .pc-badges { top: .6rem; left: .6rem; }
/* La bande des photos (AJUST-21, retour #953) : un défilement natif au doigt, une photo à la fois, sans barre ; chaque photo
   garde la marge d'avant et s'ouvre dans la visionneuse (media_viewer.js). La loupe dit qu'elle s'agrandit. */
.shop-gallery .g-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.shop-gallery .g-track::-webkit-scrollbar { display: none; }
.shop-gallery .g-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 6%; scroll-snap-align: center; scroll-snap-stop: always; cursor: zoom-in; }
.shop-gallery .g-slide img { width: 100%; height: 100%; object-fit: contain; }
.shop-gallery .g-zoom { position: absolute; right: .6rem; bottom: .6rem; z-index: 1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--brand-surface) 88%, transparent); border: 1px solid var(--brand-line); color: var(--brand-secondary); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .shop-gallery .g-track { scroll-behavior: auto; }
}
.shop-gallery .g-thumbs { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--brand-line-soft); overflow-x: auto; scrollbar-width: none; }
.shop-gallery .g-thumbs::-webkit-scrollbar { display: none; }
.shop-gallery .g-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 3px; border-radius: 10px; border: 1px solid var(--brand-line); background: var(--brand-surface); cursor: pointer; }
.shop-gallery .g-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-gallery .g-thumb.active { border-color: var(--brand-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 35%, transparent); }
.shop-head { padding: .85rem 0 .35rem; }
.shop-head .pc-brand { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--brand-muted); }
.shop-head h1, .shop-head .h1 { font-size: 1.6rem; line-height: 1.1; margin: .1rem 0 .3rem; color: var(--brand-secondary); }
.shop-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.shop-price b { font-size: 1.4rem; color: var(--brand-secondary); }
.shop-price small { font-size: .8rem; color: var(--brand-muted); font-weight: 600; }
.shop-price s { font-size: 1rem; color: var(--brand-muted); font-weight: 600; }
.shop-points { font-size: .85rem; font-weight: 800; color: var(--brand-accent-deep); margin-top: .15rem; }
.shop-points small { font-weight: 600; color: var(--brand-muted); }
.size-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.size-picker .sz { display: block; min-width: 0; border: 1px solid var(--brand-line); border-radius: 12px; padding: .5rem .35rem; text-align: center; background: var(--brand-surface); color: var(--brand-text); }
.size-picker .sz b { display: block; font-size: .9rem; color: var(--brand-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size-picker .sz small { display: block; font-size: .75rem; color: var(--brand-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le code Chogan de l'article (AJUST-22, RM-250) : sur chaque contenance, et dans la ligne du prix pour celle qui est choisie */
.size-picker .sz .cd { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--brand-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-price .shop-code { font-weight: 800; letter-spacing: .06em; color: var(--brand-secondary); }
.size-picker .sz .pr { display: block; font-size: .85rem; font-weight: 800; color: var(--brand-secondary); margin-top: .1rem; }
/* AJUST-32 : sur une carte de contenance, le prix public barré prend sa propre ligne (à 390 px, trois cartes de front : à la suite il se coupait) */
.size-picker .sz .pr s { display: block; font-size: .72rem; font-weight: 600; color: var(--brand-muted); }
.size-picker .sz .pt { display: block; min-height: 1.4em; font-size: .75rem; font-weight: 800; color: var(--brand-accent-deep); }
.size-picker .sz.is-selected { border-color: var(--brand-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 30%, transparent); background: var(--brand-surface-soft); }
.size-picker .sz.is-off { opacity: .55; }
.size-picker .sz.is-off .pr { text-decoration: line-through; }
.shop-acc { border-top: 1px solid var(--brand-line-soft); margin-top: .6rem; }
.shop-acc details { border-bottom: 1px solid var(--brand-line-soft); background: transparent; border-radius: 0; padding: 0; margin: 0; }
.shop-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; font-weight: 800; font-size: .9rem; color: var(--brand-secondary); }
.shop-acc summary::-webkit-details-marker { display: none; }
.shop-acc summary::after { content: '+'; font-size: 1.1rem; color: var(--brand-muted); }
.shop-acc details[open] summary::after { content: '–'; }
.shop-acc .acc-body { padding: 0 0 .8rem; font-size: .88rem; line-height: 1.6; color: var(--brand-text); }
.shop-acc .acc-body p:last-child { margin-bottom: 0; }
.notes-row { display: flex; gap: .4rem; }
.notes-row .note { flex: 1; min-width: 0; border-radius: 12px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line-soft); padding: .45rem .5rem; font-size: .8rem; color: var(--brand-text); }
.notes-row .note b { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-muted); }
.doc-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; font-size: .85rem; border-bottom: 1px dashed var(--brand-line-soft); color: var(--brand-secondary); font-weight: 600; }
.doc-row .di { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex: 0 0 auto; }
.doc-row small { margin-left: auto; color: var(--brand-muted); font-weight: 700; white-space: nowrap; }
.shop-public-card { margin: .8rem 0; }

/* La barre d'action : collée en bas en mobile (au-dessus de la tab bar quand il y en a une), sous le prix en bureau */
.shop-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: .5rem; align-items: center; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--brand-surface) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--brand-line); }
.app-screen:has(.app-tabbar) .shop-cta-bar { bottom: 5.6rem; }
.shop-cta-bar .cta-price { flex: 0 0 auto; font-weight: 800; color: var(--brand-secondary); font-size: 1rem; line-height: 1.1; }
.shop-cta-bar .cta-price small { display: block; font-size: .75rem; color: var(--brand-muted); font-weight: 600; }
/* Deux boutons côte à côte dès 390 px (retour de recette d'Axel : « ＋ Commande cliente » était coupé) : parts égales,
   jamais de débordement. Sous 390 px (le 370 px d'un Android, le 320 px), la barre passe sur deux rangées et chaque
   bouton prend toute la largeur, son texte entier — AJUST-39, retour #2409 : à 370 px, « ＋ Ajouter à ma sélection »
   débordait, la police réduite ne suffisait pas. */
.shop-cta-bar .btn { flex: 1 1 0; min-width: 0; padding: .55rem .5rem; font-size: .88rem; white-space: nowrap; }
@media (max-width: 389.98px) {
    .shop-cta-bar { flex-wrap: wrap; }
    .shop-cta-bar .btn { flex-basis: 100%; }
}
.shop-cta-bar .cta-note { position: absolute; left: 0; right: 0; bottom: 100%; text-align: center; font-size: .75rem; color: var(--brand-muted); background: color-mix(in srgb, var(--brand-surface) 85%, transparent); padding: .2rem 1rem; }
.shop-fiche-page { padding-bottom: 4.5rem; }
.shop-off { text-align: center; padding: 1.4rem 1rem; }
.shop-off .off-visual { width: 96px; height: 96px; margin: 0 auto .6rem; border-radius: 20px; background: var(--brand-surface-soft); border: 1px dashed var(--brand-line); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.shop-off .pc-brand { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--brand-muted); }

/* ------------------------------------------------------------------ */
/* 6. La console : les tuiles de la boutique (H9)                       */
/* ------------------------------------------------------------------ */
.console-tiles { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.console-tiles .card { margin-bottom: 0; }
.console-tile { display: flex; gap: .8rem; align-items: flex-start; }
.console-tile-visual { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--brand-line); background: var(--brand-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.console-tile-visual img { width: 100%; height: 100%; object-fit: contain; }
.console-tile-body { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ */
/* 7. Le bureau (≥ 992 px) : le gabarit large (H1), quatre cartes,       */
/*    les filtres en colonne, la fiche en deux colonnes                 */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .console-tiles { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
    .hero-shop { grid-template-columns: 1.15fr .85fr; }
    /* Quatre cartes exactement, jamais un bout de cinquième : la suite se voit avec les flèches */
    .shop-rail > .pcard { flex-basis: calc((100% - 1.8rem) / 4); }
    .shop-tiles { grid-template-columns: repeat(4, 1fr); }
    .shop-section-head h2 { font-size: 1.35rem; }
    /* La liste : les filtres en colonne à gauche, collants, la grille de quatre à droite */
    .shop-list { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
    .shop-filters { position: sticky; top: 1rem; max-height: none; overflow: visible; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
    .shop-filters .offcanvas-body { display: block; }
    .shop-filters .filter-group:first-child { padding-top: 0; }
    /* La fiche : la galerie à gauche, collante ; tout le reste à droite ; la barre d'action sous le prix */
    .shop-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
    .shop-fiche-media { position: sticky; top: 1rem; }
    .shop-fiche-page { padding-bottom: 0; }
    .shop-head { padding-top: 0; }
    .shop-head h1, .shop-head .h1 { font-size: 1.9rem; }
    .app-screen .shop-cta-bar { position: static; flex-wrap: wrap; padding: .8rem 0 .4rem; background: transparent; backdrop-filter: none; border: 0; }
    .shop-cta-bar .cta-note { position: static; order: 3; width: 100%; background: transparent; padding: .3rem 0 0; }
}