/* =====================================================================
   MIVA'KAT — Socle des catalogues publics
   Thèmes client autonomes · composants honnêtes · mobile-first
   ===================================================================== */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  /* Style « commerce vibrant » (refonte demandée) : fond clair, encre noire,
     accent orange énergique. --shop-accent est réservé aux aplats graphiques
     larges ; --shop-accent-ink (plus profond) porte le texte et les boutons
     (contraste ≥ 4,5:1 avec blanc). L'identité du commerçant s'injecte en
     surcharge (voir docs/catalogue.md) via --shop-primary / --shop-accent /
     --shop-accent-ink. */
  --shop-primary: #141414;
  --shop-secondary: #3d3d3d;
  --shop-accent: #f24e0c;
  --shop-accent-ink: #b53a02;
  --shop-bg: #f4f4f4;
  --shop-surface: #ffffff;
  --shop-text: #141414;
  --shop-muted: #6f6a63;
  --shop-line: #e7e2d9;
  --shop-success: #217a4b;
  --shop-danger: #c81e1e;
  --shop-radius: 16px;
  --shop-font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --shop-container: 1180px;
  --shop-header: 72px;
  --shop-tabbar: 60px;
  --shop-ease: cubic-bezier(.22,.61,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior: smooth; } }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--shop-bg); color: var(--shop-text); font-family: var(--shop-font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--shop-accent-ink); outline-offset: 3px; }
::selection { background: var(--shop-accent-ink); color: #fff; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.shop-container { width: 100%; max-width: var(--shop-container); margin-inline: auto; padding-inline: clamp(16px,4vw,36px); }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 200; padding: 10px 15px; border-radius: 6px; background: var(--shop-accent); color: var(--shop-primary); font-weight: 750; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.shop-header { position: sticky; top: 0; z-index: 50; height: var(--shop-header); border-bottom: 1px solid var(--shop-line); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.shop-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-brand { min-width: 0; display: flex; align-items: center; gap: 11px; text-decoration: none; }
.shop-brand__logo { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--shop-line); border-radius: 8px; background: var(--shop-surface); color: var(--shop-primary); font-size: 1rem; font-weight: 800; }
.shop-brand__logo img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.shop-brand__text { min-width: 0; }
.shop-brand__text strong { display: block; overflow: hidden; color: var(--shop-primary); font-size: .98rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.shop-brand__text span { display: block; margin-top: 2px; overflow: hidden; color: var(--shop-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.shop-header__actions { display: flex; align-items: center; gap: 8px; }
/* Navigation d'en-tête : un seul lien texte (À propos). Le reste vit dans la
   barre d'application mobile sous 1024 px. */
.shop-header__nav { display: none; align-items: center; gap: 4px; }
.shop-header__nav-desktop { display: none; }
.shop-header__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: var(--shop-muted); font-size: .82rem; font-weight: 700; text-decoration: none; border-radius: 8px; }
.shop-header__nav a:hover { color: var(--shop-primary); }
.shop-header__nav a[aria-current="page"] { color: var(--shop-primary); box-shadow: inset 0 -2px 0 var(--shop-accent); border-radius: 0; }
.shop-icon-btn, .btn-icon { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--shop-line); border-radius: 8px; background: var(--shop-surface); color: var(--shop-primary); cursor: pointer; text-decoration: none; transition: border-color .18s, background-color .18s, color .18s; }
.shop-icon-btn:hover, .btn-icon:hover { border-color: var(--shop-primary); background: var(--shop-primary); color: #fff; }
.shop-icon-btn svg, .btn-icon svg { width: 19px; height: 19px; }
.shop-contact-link { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--shop-accent-ink); color: #fff; font-size: .78rem; font-weight: 720; text-decoration: none; }
.shop-contact-link svg { width: 17px; height: 17px; flex: none; }
.shop-contact-link__label { display: none; }
.shop-main { padding-top: 24px; padding-bottom: 72px; }
.shop-page-title { margin-bottom: 14px; color: var(--shop-primary); font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.shop-hero-slider .shop-media-placeholder { min-height: 100%; aspect-ratio: 1 / 1; }
.about-hero__media .shop-media-placeholder { min-height: 260px; aspect-ratio: 1 / 1; }

/* En-tête compact des pages catégories : nom + quelques mots, puis la liste. */
.shop-cathead { padding-top: 8px; }
.shop-cathead h1 { margin-top: 10px; color: var(--shop-primary); font-size: clamp(1.7rem,6vw,2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.shop-cathead__lead { margin-top: 8px; max-width: 52ch; color: var(--shop-muted); font-size: .9rem; line-height: 1.6; }
.shop-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--shop-accent-ink); font-size: .7rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.shop-eyebrow::before { content: ""; width: 20px; height: 3px; background: currentColor; }
.shop-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 17px; border: 1px solid transparent; border-radius: 7px; background: var(--shop-primary); color: #fff; font-size: .86rem; font-weight: 730; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .18s, background-color .18s, border-color .18s; }
.shop-btn:hover { transform: translateY(-2px); }
.shop-btn svg { width: 17px; height: 17px; }
.shop-btn--accent { background: var(--shop-accent-ink); color: #fff; }
.shop-btn--outline { border-color: var(--shop-line); background: transparent; color: var(--shop-primary); }
.shop-media-placeholder { position: relative; min-height: 260px; height: 100%; display: grid; place-items: center; overflow: hidden; padding: 30px; background: var(--shop-bg); color: var(--shop-muted); text-align: center; }
.shop-media-placeholder::before { content: ""; position: absolute; right: -8%; bottom: -28%; width: 62%; height: 100%; background: var(--shop-accent); clip-path: polygon(62% 0,100% 0,100% 100%,0 100%,38% 48%); opacity: .9; }
.shop-media-placeholder::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(11,23,42,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,23,42,.06) 1px,transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(135deg,#000,transparent 72%); }
.shop-media-placeholder > * { position: relative; z-index: 1; }
.shop-media-placeholder span { display: grid; justify-items: center; gap: 9px; font-size: .78rem; font-weight: 650; }
.shop-media-placeholder svg { width: 34px; height: 34px; color: var(--shop-primary); }
.shop-product-card__media .shop-media-placeholder { min-height: 0; }
.product-gallery__main > .shop-media-placeholder { min-height: 100%; }

.shop-categories { padding-block: 16px 4px; }
.shop-categories__label { margin-bottom: 6px; color: var(--shop-muted); font-size: .68rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.shop-category-list { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.shop-category-list::-webkit-scrollbar { display: none; }
.shop-category { min-height: 36px; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--shop-line); border-radius: 999px; background: var(--shop-surface); color: var(--shop-muted); font-size: .78rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.shop-category:hover, .shop-category[aria-current="page"] { border-color: var(--shop-accent-ink); background: var(--shop-accent-ink); color: #fff; }

.shop-catalog { padding-top: 20px; scroll-margin-top: calc(var(--shop-header) + 18px); }
.shop-catalog__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shop-catalog__head > div:first-child { min-width: 0; flex: 0 1 auto; }
.shop-catalog__head h2 { color: var(--shop-primary); font-size: clamp(1.15rem,4.5vw,2.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-catalog__head p { margin-top: 2px; color: var(--shop-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Recherche pilule : icône accent, champ sans bordure, anneau au focus. */
.shop-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 8px; border: 1px solid var(--shop-line); border-radius: 999px; background: var(--shop-surface); box-shadow: 0 1px 2px rgba(20,20,20,.06); transition: border-color .18s, box-shadow .18s; }
.shop-search:focus-within { border-color: var(--shop-accent-ink); box-shadow: 0 0 0 3px rgba(242,78,12,.18), 0 8px 20px -12px rgba(20,20,20,.4); }
.shop-search svg { position: static; width: 18px; height: 18px; flex: none; margin-left: 8px; color: var(--shop-accent-ink); transform: none; pointer-events: none; }
.shop-search input { width: 100%; min-height: 38px; padding: 8px 6px; border: 0; border-radius: 0; background: transparent; color: var(--shop-text); }
.shop-search input:focus { border-color: transparent; outline: none; box-shadow: none; }
.shop-search__clear { position: static; width: 36px; height: 36px; flex: none; display: none; place-items: center; margin-right: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--shop-muted); transform: none; cursor: pointer; }
.shop-search__clear:hover { background: var(--shop-bg); color: var(--shop-primary); }
.shop-search__clear svg { margin-left: 0; }
.shop-search__clear.is-visible { display: grid; }
.shop-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.shop-product-card { position: relative; min-width: 0; overflow: hidden; border: 0; border-radius: var(--shop-radius); background: var(--shop-surface); box-shadow: 0 1px 2px rgba(20,20,20,.05); transition: transform .2s var(--shop-ease), box-shadow .2s var(--shop-ease); }
.shop-product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20,20,20,.35); }
.shop-product-card[hidden] { display: none; }
.shop-product-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: #ececec; }
.shop-product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--shop-ease); }
.shop-product-card:hover .shop-product-card__media img { transform: scale(1.025); }
.shop-product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.shop-fav { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--shop-primary); cursor: pointer; transition: color .18s, transform .18s; }
.shop-fav:hover { transform: scale(1.08); }
.shop-fav svg { width: 17px; height: 17px; }
.shop-fav[aria-pressed="true"] { color: var(--shop-accent-ink); }
.shop-fav[aria-pressed="true"] svg { fill: currentColor; }
.shop-badge { padding: 5px 7px; border-radius: 4px; background: var(--shop-primary); color: #fff; font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.shop-badge--accent { background: var(--shop-accent-ink); color: #fff; }
.shop-badge--sale { background: var(--shop-danger); }
.shop-product-card__body { padding: 12px; }
.shop-product-card__category { color: var(--shop-muted); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.shop-product-card h3 { margin-top: 5px; color: var(--shop-primary); font-size: .88rem; }
.shop-product-card h3 a { text-decoration: none; }
.shop-product-card__description { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--shop-muted); font-size: .76rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 0; border-top: 0; }
.shop-price { color: var(--shop-primary); font-size: .92rem; font-weight: 800; letter-spacing: -.02em; }
.shop-price small { margin-left: 5px; color: var(--shop-muted); font-size: .7rem; font-weight: 550; }
.shop-old-price { margin-left: 6px; color: var(--shop-muted); font-size: .75rem; text-decoration: line-through; }
.cart-mini { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--shop-primary); color: #fff; text-decoration: none; }
.cart-mini:hover { border-color: var(--shop-primary); background: var(--shop-primary); color: #fff; }
.cart-mini svg { width: 16px; height: 16px; }
.shop-empty { padding: 44px 22px; border: 1px solid var(--shop-line); background: var(--shop-surface); text-align: center; }
.shop-empty h3 { color: var(--shop-primary); }
.shop-empty p { max-width: 45ch; margin: 8px auto 0; color: var(--shop-muted); }
.shop-search-empty { margin-top: 18px; }

.shop-footer, .footer { border-top: 1px solid var(--shop-line); background: var(--shop-primary); color: #fff; }
.shop-footer__grid { display: grid; gap: 24px; padding-block: 38px; }
.shop-footer__brand { display: flex; align-items: center; gap: 11px; }
.shop-footer__mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); color: var(--shop-accent); font-weight: 800; }
.shop-footer__brand strong { font-size: 1rem; }
.shop-footer p, .footer p { max-width: 50ch; color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.6; }
.shop-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.64); font-size: .7rem; }
.shop-footer__bottom a { color: #fff; text-decoration: none; }

/* Fiche produit */
.product-shell { padding-bottom: 90px; }
.product-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--shop-muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
.product-back svg { width: 16px; height: 16px; }
.product-layout { display: grid; gap: 20px; }
.product-gallery { min-width: 0; padding: 12px; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.product-gallery__main { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 8px; background: var(--shop-bg); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.product-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.product-thumb { width: 68px; height: 68px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--shop-line); border-radius: 6px; background: var(--shop-bg); cursor: pointer; }
.product-thumb[aria-current="true"] { border-color: var(--shop-accent); box-shadow: 0 0 0 2px var(--shop-accent); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { min-width: 0; }
.product-breadcrumb { color: var(--shop-muted); font-size: .74rem; }
.product-breadcrumb a { text-decoration: none; }
.product-info h1 { margin-top: 13px; color: var(--shop-primary); font-size: clamp(2rem,5vw,3.5rem); }
.product-price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 22px; padding-block: 20px; border-block: 1px solid var(--shop-line); }
.product-price { color: var(--shop-primary); font-size: clamp(1.7rem,4vw,2.5rem); font-weight: 750; }
.product-description { margin-top: 22px; color: var(--shop-muted); font-size: .96rem; line-height: 1.75; white-space: pre-line; }
.product-availability { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--shop-success); font-size: .78rem; font-weight: 700; }
.product-availability svg { width: 17px; height: 17px; }
.product-actions { display: grid; grid-template-columns: 1fr 44px; gap: 9px; margin-top: 26px; }
.product-actions .shop-btn { width: 100%; }
.product-actions .shop-icon-btn { width: 44px; height: 48px; }
.product-related { padding-top: 52px; }
.product-related h2 { color: var(--shop-primary); font-size: 1.6rem; }
.product-related .shop-product-grid { margin-top: 20px; }

/* Variante minimale : éditoriale, plus aérée. */
.catalog-theme--minimal .shop-main { padding-top: 34px; }
.catalog-theme--minimal .shop-cathead h1 { letter-spacing: -.04em; }
.catalog-theme--minimal .shop-product-grid { gap: 32px 20px; }
.catalog-theme--minimal .shop-product-card { border: 0; border-bottom: 1px solid var(--shop-line); border-radius: 0; background: transparent; }
.catalog-theme--minimal .shop-product-card:hover { transform: none; box-shadow: none; }
.catalog-theme--minimal .shop-product-card__media { aspect-ratio: 4/3; }
.catalog-theme--minimal .shop-product-card__body { padding-inline: 0; }

/* Variante moderne : contraste éditorial, jamais un dégradé générique. */
.catalog-theme--modern { --shop-bg:#f2f1ed; }
.catalog-theme--modern .shop-eyebrow { color: var(--shop-accent); }
.catalog-theme--modern .shop-btn { background: var(--shop-accent-ink); color: #fff; }
.catalog-theme--modern .shop-btn--outline { border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }
.catalog-theme--modern .shop-product-card { border: 0; border-radius: 0; box-shadow: none; }
.catalog-theme--modern .shop-product-card__media { aspect-ratio: 4/5; }
.catalog-theme--modern .shop-category[aria-current="page"] { background: var(--shop-accent); color: #fff; }
.catalog-theme--modern .product-gallery, .catalog-theme--modern .shop-product-card { background: #fff; }

@media (min-width:560px) {
  .shop-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-footer__grid { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
}
@media (min-width:720px) {
  .shop-header__nav { display: inline-flex; }
  .shop-contact-link__label { display: inline; }
  .shop-product-grid { gap: 18px; }
  .shop-product-card__body { padding: 16px; }
  .shop-product-card h3 { font-size: 1rem; }
  .shop-price { font-size: 1.02rem; }
  .cart-mini { width: 44px; height: 44px; }
  .shop-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-layout { grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); align-items: start; }
  .product-info { position: sticky; top: calc(var(--shop-header) + 24px); }
}
@media (min-width:960px) {
  .catalog-theme--minimal .shop-product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .shop-header { height: 64px; }
  :root { --shop-header:64px; }
  .shop-brand__logo { width: 40px; height: 40px; }
  .shop-brand__text strong { font-size: .9rem; }
  .shop-main { padding-top: 12px; }
  .product-actions { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; padding: 8px; border: 1px solid var(--shop-line); border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px -20px rgba(11,23,42,.7); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* =====================================================================
   Hero slider des produits phares — arbitrage consigné (demande explicite) :
   défilement automatique avec pause au survol, au focus, onglet masqué et
   `prefers-reduced-motion` (retour au manuel). Mobile : carte splittée compacte
   (textes à gauche, box carrée du visuel à droite). Desktop ≥ 900 px : carte
   haute, copie sur fond uni, image à droite fondue par masque.
   ===================================================================== */
.shop-hero-slider { position: relative; overflow: hidden; border-radius: var(--shop-radius); background: #16110e; color: #fff; }
.shop-hero-slider__slides { margin: 0; padding: 0; list-style: none; }
/* Carte splittée : textes à gauche, visuel carré (format natif des visuels
   produits) dans sa propre box à droite. */
.shop-hero-slider__slide { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 10px; align-items: center; padding: 12px; }
.js .shop-hero-slider__slide[hidden] { display: none; }
.shop-hero-slider__slide:not([hidden]) { animation: hero-fade .45s ease; }
@keyframes hero-fade { from { opacity: .15; } to { opacity: 1; } }
.shop-hero-slider__img { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 1/1; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); object-fit: cover; background: #2a231d; }
.shop-hero-slider__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.shop-hero-slider__kicker { color: var(--shop-accent); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-hero-slider__copy h2, .shop-hero-slider__copy h3 { margin-top: 5px; color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.shop-hero-slider__price { margin-top: 5px; color: var(--shop-accent); font-size: .78rem; font-weight: 750; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-hero-slider__copy .shop-cta { margin-top: 8px; min-height: 44px; padding: 10px 16px; font-size: .78rem; align-self: flex-start; }
/* Pastille de rang sur la box image : repère de défilement élégant. */
.shop-hero-slider__rank { position: absolute; top: 20px; right: 20px; padding: 5px 10px; border-radius: 999px; background: rgba(12,9,7,.72); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.shop-hero-slider__nav { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; }
.shop-hero-slider__nav [data-hero-next] { margin-left: auto; }
.shop-hero-slider__arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.shop-hero-slider__arrow svg { width: 15px; height: 15px; }
.shop-hero-slider__dots { display: flex; align-items: center; gap: 2px; margin-inline: 4px; }
.shop-hero-slider__dot { width: 40px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.shop-hero-slider__dot::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }
.shop-hero-slider__dot[aria-current="true"]::before { background: var(--shop-accent); }

/* Bouton d'action clair sur fond sombre (hero, appel À propos). */
.shop-cta { min-height: 48px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; background: var(--shop-accent-ink); color: #fff; font-size: .88rem; font-weight: 750; text-decoration: none; }
.shop-cta svg { width: 17px; height: 17px; }

/* Pastilles de filtre de la grille (Tout / Sélection / Promos). */
.shop-filters { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; scrollbar-width: none; }
.shop-filters::-webkit-scrollbar { display: none; }
.shop-filter { flex: 0 0 auto; min-height: 40px; padding: 8px 18px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--shop-muted); font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.shop-filter[aria-pressed="true"] { background: var(--shop-accent-ink); color: #fff; }

/* =====================================================================
   Page À propos — la boutique derrière le catalogue.
   Le catalogue sert alors de site vitrine au commerçant qui n'en a pas.
   Blocs : identité, informations pratiques, engagements, appel à l'action.
   ===================================================================== */
.about-hero { display: grid; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.about-hero__media { min-height: 0; }
.about-hero__media img { width: 100%; aspect-ratio: 1/1; max-height: 260px; object-fit: cover; }
.about-hero__copy { padding: clamp(24px,5vw,54px); }
.about-hero h1 { max-width: 14ch; margin-top: 14px; color: var(--shop-primary); font-size: clamp(2rem,6vw,3.6rem); }
.about-hero__lead { max-width: 56ch; margin-top: 14px; color: var(--shop-muted); font-size: clamp(.98rem,1.5vw,1.08rem); line-height: 1.7; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.about-facts { display: grid; gap: 12px; margin-top: 20px; }
.about-fact { padding: 18px; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.about-fact dt { color: var(--shop-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-fact dd { margin: 6px 0 0; color: var(--shop-primary); font-size: .95rem; font-weight: 650; line-height: 1.6; }
.about-fact dd a { color: inherit; }
.about-section { padding-top: 36px; }
.about-section h2 { color: var(--shop-primary); font-size: clamp(1.4rem,3vw,1.9rem); }
.about-section > p { margin-top: 8px; max-width: 60ch; color: var(--shop-muted); font-size: .88rem; }
.about-cta { margin-top: 24px; padding: clamp(22px,5vw,40px); border-radius: var(--shop-radius); background: var(--shop-primary); color: #fff; }
.about-cta h2 { color: #fff; font-size: clamp(1.4rem,3vw,1.9rem); }
.about-cta p { margin-top: 8px; max-width: 52ch; color: rgba(255,255,255,.75); font-size: .88rem; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.about-cta .shop-btn { background: #fff; color: var(--shop-primary); }
.about-cta .shop-btn--whatsapp { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }

/* =====================================================================
   Pied de page enrichi + barre d'application mobile.
   Sous 1024 px (tablette et mobile), le catalogue se comporte comme une
   application : en-tête collant en haut, barre d'onglets collée en bas
   (4 entrées, icônes seules, libellés accessibles), safe-area respectée.
   ===================================================================== */
.shop-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 18px; }
.shop-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 650; text-decoration: none; }
.shop-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.shop-tabbar { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--shop-line); border-radius: 20px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 32px -12px rgba(20,20,20,.35); }
.shop-tabbar__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--shop-tabbar); padding-top: 6px; color: #1c1a1a; text-decoration: none; }
.shop-tabbar__link::after { content: attr(aria-label); font-size: .6rem; font-weight: 650; line-height: 1; white-space: nowrap; }
.shop-tabbar__link svg { width: 22px; height: 22px; }
.shop-tabbar__link:hover { color: var(--shop-primary); }
.shop-tabbar__link[aria-current="page"] { color: var(--shop-accent-ink); }
@media (max-width:1023px) {
  body.catalog-site { padding-bottom: calc(var(--shop-tabbar) + 16px + env(safe-area-inset-bottom)); }
  .shop-footer { padding-bottom: 8px; }
  /* Pied de page réduit : seule la mention légale, la navigation vit dans les onglets. */
  .shop-footer__grid { display: none; }
  .shop-footer__bottom { justify-content: center; text-align: center; border-top: 0; padding-block: 14px; }
  /* Les actions collantes des fiches produit se posent au-dessus du dock. */
  .product-actions { bottom: calc(var(--shop-tabbar) + 26px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width:560px) {
  .about-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-hero { grid-template-columns: minmax(0,1fr) minmax(0,.72fr); align-items: center; }
  .about-hero__media { display: grid; justify-items: end; padding: clamp(20px,4vw,40px); }
  .about-hero__media img { width: 100%; max-width: 340px; aspect-ratio: 1/1; max-height: none; min-height: 0; border-radius: var(--shop-radius); }
}
@media (min-width:900px) {
  .shop-hero-slider__slides { position: relative; height: 400px; }
  .shop-hero-slider__slide { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
  .shop-hero-slider__img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 46%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .shop-hero-slider__copy { display: flex; flex-direction: column; justify-content: center; max-width: 54%; height: 100%; padding: 44px; }
  .shop-hero-slider__kicker { font-size: .7rem; }
  .shop-hero-slider__copy h2, .shop-hero-slider__copy h3 { font-size: clamp(2rem,3.6vw,3rem); }
  .shop-hero-slider__price { font-size: 1rem; display: block; }
  .shop-hero-slider__copy .shop-cta { margin-top: 18px; min-height: 48px; padding: 13px 24px; font-size: .88rem; }
  .shop-hero-slider__rank { top: 28px; right: 32px; }
  .shop-hero-slider__nav { position: absolute; left: 40px; bottom: 22px; padding: 0; }
  .shop-hero-slider__nav [data-hero-next] { margin-left: 0; }
}
@media (min-width:1024px) {
  .shop-tabbar { display: none; }
  .shop-header__nav-desktop { display: inline-flex; }
  .shop-product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* --------------------------------------------------------------------------
   EC-13 — Page « À propos » : la couverture est un bandeau, pas un carré.

   La règle générale imposait `aspect-ratio: 1/1` et `object-fit: cover` à
   l'image de tête, pour un logo. Appliquée à une couverture 16:9, elle en
   coupait les deux tiers — précisément les bandes où un commerce met son nom
   ou son adresse. On distingue donc sur la largeur écrite dans le HTML, qui
   vient de la donnée : 1600 pour une couverture, 400 pour un logo.
   -------------------------------------------------------------------------- */
.about-hero__media img[width="1600"] {
  aspect-ratio: 16/9;
  max-height: 340px;
  max-width: 100%;
}
.about-hero__media img[width="400"] {
  aspect-ratio: 1/1;
  max-height: 260px;
}
@media (min-width:560px) {
  .about-hero__media img[width="1600"] { max-width: 520px; }
  .about-hero__media img[width="400"] { max-width: 340px; }
}

/* Horaires jour par jour : deux colonnes, lisible sur téléphone comme sur
   grand écran. Le tableau est un `dl` et non un `table` — ce sont des
   associations de termes, pas des données tabulaires, et un lecteur d'écran
   les annonce mieux ainsi. */
.about-hours { margin: 16px 0 0; display: grid; gap: 2px; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); overflow: hidden; }
.about-hours__ligne { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 18px; background: var(--shop-surface); }
.about-hours__ligne:nth-child(even) { background: transparent; }
.about-hours dt { flex: 1 1 14rem; color: var(--shop-primary); font-size: .88rem; font-weight: 650; }
.about-hours dd { margin: 0; color: var(--shop-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* V2.2 — Le choix d'une déclinaison (fiche produit).
   Un lien par déclinaison, la choisie marquée par `aria-current` : le
   sélecteur fonctionne sans JavaScript, et l'URL se partage. */
.shop-declinaisons { margin: 18px 0 6px; }
.shop-declinaisons__intitule {
  margin: 0 0 10px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shop-muted);
}
.shop-declinaisons__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shop-declinaison {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--shop-line); border-radius: 12px;
  background: var(--shop-surface); color: var(--shop-text);
  font-size: .84rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.shop-declinaison:hover { border-color: var(--shop-primary); }
.shop-declinaison__prix { font-weight: 700; color: var(--shop-muted); }
.shop-declinaison--choisie { border-color: var(--shop-primary); background: var(--shop-primary); color: var(--shop-surface); }
.shop-declinaison--choisie .shop-declinaison__prix { color: var(--shop-surface); opacity: .82; }
.shop-declinaison--epuise { opacity: .5; text-decoration: line-through; }
.shop-declinaison__etat { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── R27 — Un sélecteur par dimension ─────────────────────────────────────
   Un produit à dimensions (couleur × taille) affiche une rangée par dimension,
   avec le nom de la dimension en en-tête. Écrire « Rouge / M » sur douze lignes
   oblige le visiteur à lire douze chaînes pour trouver la sienne ; une rangée de
   couleurs et une rangée de tailles se lisent en un regard. */
.shop-declinaison-groupe { margin: 0 0 14px; }
.shop-declinaison-groupe__nom {
  margin: 0 0 7px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shop-muted);
}
/* La dimension qui fixe le prix porte une pastille. Elle dit au visiteur que
   changer de valeur change le montant — donc de comparer avant de choisir. */
.shop-declinaison-groupe__pilote {
  display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%;
  background: var(--shop-accent-ink); vertical-align: middle;
}

/* ── R27 — Le badge de type ──────────────────────────────────────────────────
   Ni or ni rouge : un service et une offre ne sont ni une promotion ni une
   sélection. La pastille est neutre, et le commerce garde ainsi la seule couleur
   d'alerte pour ce qui est réellement en alerte. */
.shop-badge--type { background: var(--shop-secondary); }
.product-type-badge { margin: 0 0 10px; }

/* ── GC-09 — La pastille de disponibilité ────────────────────────────────────
   « Stock faible » ou « Épuisé », et rien pour « disponible ». Elle est
   **discrète** (surface claire, texte atténué, filet) et non colorée : la
   disponibilité est une information, pas une promotion, et elle ne doit pas
   voler la vedette aux pastilles « Promo » (rouge) et « Sélection » (accent).
   Elle reprend exactement le vocabulaire de `t-pastille--discret`, employé par
   les modèles récents : le même mot ne s'écrit pas de deux façons selon le
   modèle choisi. */
.shop-badge--discret { background: var(--shop-surface); color: var(--shop-muted); box-shadow: inset 0 0 0 1px var(--shop-line); }

/* ── LF-09 — Le bandeau hors connexion ───────────────────────────────────────
   Il dit que la page vient du cache et **de quand** elle date (D129). Discret,
   en haut de page, jamais rouge : l'absence de réseau n'est pas une panne, et
   le visiteur n'a rien à réparer. Masqué par défaut — c'est le script qui le
   révèle, et sans JavaScript il ne s'affiche jamais. */
.catalogue-hors-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 9px 16px; background: var(--shop-bg); color: var(--shop-muted); font-size: .8rem; border-bottom: 1px solid var(--shop-line); }
.catalogue-hors-ligne[hidden] { display: none; }
.catalogue-hors-ligne time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--shop-text); }

/* ── R27 — La formule de tarification ────────────────────────────────────────
   Sous le prix, et non à sa place : le prix garde l'emplacement qu'il occupe
   toujours, donc un commerce qui passe de « sur devis » à « 10 000 » ne voit
   rien bouger. */
.product-ref-label {
  margin: -2px 0 0; font-size: .8rem; font-weight: 500;
  color: var(--shop-muted); font-style: italic;
}

/* ── R27 — Les caractéristiques nommées ──────────────────────────────────────
   Un tableau, pas une phrase : c'est ce qui permet de relire d'un coup d'œil,
   et au commerce de voir ce qu'il a saisi et ce qu'il a oublié. */
.product-specs { margin: 18px 0 0; }
.product-specs h2 {
  margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shop-muted);
}
.product-specs dl { margin: 0; display: grid; gap: 1px; background: var(--shop-line); border: 1px solid var(--shop-line); border-radius: 12px; overflow: hidden; }
.product-specs dl > div { display: flex; gap: 12px; padding: 9px 13px; background: var(--shop-surface); }
.product-specs dt { margin: 0; min-width: 34%; font-size: .78rem; color: var(--shop-muted); }
.product-specs dd { margin: 0; font-size: .84rem; font-weight: 600; }

/* ── R27 — Le contenu possible d'une offre ───────────────────────────────────
   Le titre dit « peut comprendre », jamais « contient » : la liste n'est pas un
   engagement, et le commerce serait tenu de livrer ce qu'il n'a promis qu'en
   partie. */
.product-inclusions { margin: 18px 0 0; }
.product-inclusions h2 {
  margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shop-muted);
}
.product-inclusions ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 5px; font-size: .86rem; }
.product-inclusions__note { margin: 8px 0 0; font-size: .74rem; color: var(--shop-muted); font-style: italic; }

/* =====================================================================
   R28 - La demande : panier, quantite, envoi.

   Meme bloc que dans `catalog-base.css`, avec les jetons du socle
   (`--shop-*`). Il vit dans les deux feuilles, et nulle part ailleurs,
   parce qu'il est le meme sur les quatre apparences : un modele change la
   presentation, jamais la structure.

   Aucune couleur ecrite non plus - le socle a ses propres variables, et
   une valeur en dur dans une feuille ne serait pas personnalisable.
   ===================================================================== */

.shop-main.cart-page { padding-block: clamp(24px,6vw,60px); }
.cart-page__inner { display: grid; gap: 18px; justify-items: start; }
.cart-page__titre { margin: 0; font-size: clamp(1.5rem,4vw,2.1rem); line-height: 1.12; }
.cart-page__alerte {
  margin: 0;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--shop-accent-ink);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
  color: var(--shop-text);
  font-size: .92rem;
}
.cart-zone { width: 100%; display: grid; gap: 15px; }
.cart-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-ligne {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: var(--shop-surface);
}
.cart-ligne__titre { margin: 0; font-size: 1rem; font-weight: 750; line-height: 1.25; }
.cart-ligne__quantite { margin: 0; color: var(--shop-muted); font-size: .9rem; }
.cart-ligne__actions { margin: 0; display: flex; gap: 8px; align-items: center; }
/* 44 px : la meme cible que le reste du socle. Un « - » qu'on rate une
 * fois, on le rate encore. */
.cart-ligne__bouton {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 13px;
  border: 1px solid var(--shop-line);
  border-radius: 7px;
  background: var(--shop-bg);
  color: var(--shop-text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.cart-ligne__bouton:hover { border-color: var(--shop-primary); }
.cart-vide { margin: 0; display: grid; gap: 9px; justify-items: start; color: var(--shop-muted); }
.cart-vide strong { color: var(--shop-text); }
.cart-compte { margin: 0; font-size: 1rem; font-weight: 730; }
.cart-note { margin: 0; color: var(--shop-muted); font-size: .87rem; }
.cart-envoi { margin: 0; }
.cart-envoi .shop-btn { width: 100%; }
.cart-sans-js { margin: 0; color: var(--shop-muted); font-size: .9rem; }
.cart-retour { margin: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.cart-lien { color: var(--shop-accent-ink); text-decoration: underline; }

/* =====================================================================
   R29 — L'entree « ma demande » et la page de contact.

   Une balise, une peau par modele : la classe `cart-entree--{modele}` que le
   partiel pose decide de l'habillage, et chaque feuille n'ecrit que sa peau.
   Le **comportement** reste dans `panier.js`, branche sur les `data-*` — aucun
   modele ne peut donc avoir un panier qui compte autrement qu'un autre.

   Le trait est un `stroke` : il suit la couleur du texte et reste lisible sur
   un accent clair comme sur un fond sombre. Les roues sont **remplies** — a
   1,15 px un cercle en `stroke` disparait sur un ecran Retina, et c'est ce
   detail qui fait lire « chariot » plutot que « rectangle a deux points ».
   ===================================================================== */

.cart-entree {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 9px;
  border-radius: 9px; color: var(--shop-text); text-decoration: none;
  transition: background-color .18s, color .18s;
}
.cart-entree:hover { background: var(--shop-bg); color: var(--shop-primary); }
.cart-entree__dessin { width: 21px; height: 21px; display: block; }
.cart-entree__roue { fill: currentColor; stroke: none; }

/* La pastille est posee en absolu : son arrivee ne doit pas decaler le lien,
   sinon le bouton de contact sauterait a chaque ajout. */
.cart-entree__compteur {
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--shop-accent-ink); color: #fff;
  font-size: .64rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--shop-bg);
}
.cart-entree[hidden], .cart-entree__compteur[hidden] { display: none; }

/* Le panier dans la barre basse. Le socle n'ecrit pas d'etiquette sous ses
   icones et la barre n'en compte que quatre : la pastille est ce qui distingue
   le panier des trois autres, sans ecrire son nom. */
.shop-tabbar__panier .shop-tabbar__dessin { position: relative; display: inline-flex; }
.shop-tabbar__dessin svg { width: 22px; height: 22px; display: block; }
.shop-tabbar__compteur {
  position: absolute; top: -4px; right: -7px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--shop-accent-ink); color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 1;
}
.shop-tabbar__dessin[hidden], .shop-tabbar__compteur[hidden] { display: none; }

/* La page de contact. Le bloc d'action passe avant les coordonnees sur grand
   ecran et l'inverse en dessous de 700 px : sur un telephone on scrolle, on ne
   survole pas, et un bouton seul a trois ecrans de haut n'est pas une action.
   L'ordre est fait dans le flux — donc il n'y a pas deux versions a tenir. */
.contact-page { padding-block: clamp(24px,6vw,56px); }
.contact-page__inner { display: flex; flex-direction: column; gap: clamp(18px,4vw,32px); }
.contact-hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px,3vw,22px); }
.contact-hero__signe {
  width: 76px; height: 76px; flex: none; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--shop-radius); background: var(--shop-primary);
  color: #fff; font-size: 1.7rem; font-weight: 800;
}
.contact-hero__signe img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.contact-hero__texte { min-width: 0; }
.contact-hero__texte h1 { margin: 0; font-size: clamp(1.5rem,4vw,2.05rem); line-height: 1.12; }
.contact-hero__nom { margin: 5px 0 0; color: var(--shop-secondary); font-weight: 700; }
.contact-hero__note { margin: 8px 0 0; color: var(--shop-muted); max-width: 62ch; }

.contact-action, .contact-none {
  display: grid; gap: 11px; justify-items: start;
  padding: clamp(16px,3vw,24px); border-radius: var(--shop-radius);
  border: 1px solid var(--shop-line); background: var(--shop-surface);
}
.contact-none { border-color: var(--shop-accent-ink); }
.contact-action h2, .contact-block h2 { margin: 0; font-size: 1.12rem; }
.contact-action p, .contact-none p { margin: 0; color: var(--shop-muted); max-width: 56ch; }
.contact-action__ou { font-size: .88rem; }
.contact-action__email { color: var(--shop-accent-ink); }

.contact-block { display: grid; gap: 14px; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list__ligne, .contact-note {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--shop-line); margin: 0;
}
.contact-list__ligne:last-child { border-bottom: 0; }
.contact-note { padding-bottom: 0; }
.contact-list__nom, .contact-note span { min-width: 116px; color: var(--shop-muted); font-size: .87rem; }
.contact-list__valeur { color: var(--shop-text); font-weight: 700; word-break: break-word; }
.contact-list__ligne--whatsapp .contact-list__valeur { color: var(--shop-success); }

.contact-retour { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 700px) {
  /* L'action passe apres les coordonnees : sur un telephone, le visiteur scrolle
     et compare — un bouton en tete l'interromprait. `order` suffit, et evite
     six regles de `grid-template-areas`. */
  .contact-action, .contact-none { order: 2; }
  .contact-block { order: 1; }
}


/* R30 — L'écran de choix d'une fiche : un seul bouton, deux routes.
   C'est le même bloc que `catalog-base.css`, repeint pour le socle : mêmes
   `data-*`, même `produit-action.js`, seuls les jetons changent. Aucun geste
   d'ici ne recharge la page — WhatsApp part dans un nouvel onglet, l'ajout est
   lu par `panier.js`, et le choix d'une déclinaison est pris en place.

   Règles resserrées, commentaires réduits : `catalog.css` est le seul asset
   dont le poids est verrouillé (T2), et un écran entier tient dans l'écart
   qu'il reste au plafond. */
.cart-fiche { position: fixed; inset: 0; z-index: 90; display: flex; }
.cart-fiche__voile { position: absolute; inset: 0; background: rgb(17 24 39 / 55%); border: 0; cursor: pointer; }
.cart-fiche__panneau {
  position: relative; z-index: 1; width: min(100%, 460px); margin: auto;
  max-height: 92vh; overflow: auto;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--shop-surface); color: var(--shop-text);
  border: 1px solid var(--shop-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(2 6 23 / 35%);
}
@media (max-width: 640px) {
  .cart-fiche { align-items: flex-end; }
  .cart-fiche__panneau { width: 100%; max-width: none; margin: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -18px 44px rgb(2 6 23 / 30%); }
}
.cart-fiche__fermer {
  position: absolute; top: 6px; right: 6px;
  min-height: 44px; min-width: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--shop-muted);
}
.cart-fiche__fermer:hover { color: var(--shop-text); }
.cart-fiche__fermer svg { width: 20px; height: 20px; }
.cart-fiche__surtitre { margin: 0; color: var(--shop-muted); font-size: .74rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
.cart-fiche__titre { margin: 5px 0 0; padding-right: 44px; font-size: 1.12rem; font-weight: 730; line-height: 1.25; }
.cart-fiche__prix { margin: 10px 0 0; font-size: 1.7rem; font-weight: 730; line-height: 1.1; }
.cart-fiche__champ { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.cart-fiche__etiquette { color: var(--shop-muted); font-size: .88rem; }
.cart-fiche__select, .cart-fiche__qte {
  min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--shop-line); border-radius: 7px;
  background: var(--shop-bg); color: var(--shop-text); font: inherit;
}
.cart-fiche__qte { width: 104px; }
.cart-fiche__commande { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--shop-line); }
.cart-fiche__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cart-fiche__whatsapp,
.cart-fiche__ajouter,
.cart-fiche__repli {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px;
  border: 1px solid var(--shop-primary); border-radius: 7px;
  font: inherit; font-size: .92rem; font-weight: 730;
  text-decoration: none; cursor: pointer;
}
.cart-fiche__whatsapp { background: var(--shop-primary); color: #fff; }
.cart-fiche__whatsapp svg { width: 20px; height: 20px; flex: none; }
.cart-fiche__ajouter { background: transparent; color: var(--shop-primary); }
.cart-fiche__ajouter:hover { background: var(--shop-primary); color: #fff; }
.cart-fiche__repli { background: transparent; color: var(--shop-primary); }
.cart-fiche__aide { margin: 0; color: var(--shop-muted); font-size: .84rem; line-height: 1.45; }
.cart-fiche__retour { margin: 0; color: var(--shop-accent-ink); font-size: .88rem; font-weight: 730; }
@media (prefers-reduced-motion: reduce) { .cart-fiche__panneau { scroll-behavior: auto; } }
@media (max-width: 760px) {
  .shop-header__actions [data-panier-entree] { display: none; }
}
.cart-fiche { align-items: center; justify-content: center; padding: 16px; }
.cart-fiche__panneau { width: min(95%, 460px); margin: auto; max-height: min(90vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) {
  .cart-fiche { align-items: center; padding: 12px; }
  .cart-fiche__panneau { width: 95%; max-width: 460px; margin: auto; border-radius: 14px; box-shadow: 0 24px 60px rgb(2 6 23 / 35%); }
}
.shop-category-list { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.shop-categories__hint { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .8rem; color: var(--shop-muted, #64748b); }
.shop-categories__hint svg { width: 16px; height: 16px; }
@keyframes shop-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
img[data-skeleton], .shop-media-placeholder { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 800px 100%; animation: shop-shimmer 1.4s linear infinite; min-height: 120px; }
img[data-skeleton].is-loaded, img.is-loaded { animation: none; background: none; min-height: 0; }
@media (prefers-reduced-motion: reduce) { img[data-skeleton], .shop-media-placeholder { animation: none; } }