/* Direction "Index" — voir admin.md. Monochrome strict, aucune couleur
   d'accent. Pas de coins arrondis, pas de card : seuls des border-bottom
   structurent la page. */

:root {
  --ink: #1e1e1c;
  --ink-secondary: #5c5c5c;
  --ink-muted: #6b6b6b;
  --paper: #ffffff;
  --border: rgba(30, 30, 28, .12);
  --border-table: rgba(30, 30, 28, .08);
  --photo-bg: #f3f3f1;
  --danger: #8a2c22;
}

* { box-sizing: border-box; }

/* Filet de sécurité anti-débordement horizontal : un élément positionné en
   absolu (ex. l'infobulle .info-tip__bubble, centrée sur un picto proche
   d'un bord d'écran) peut dépasser la largeur de l'écran même invisible
   (opacity ne retire rien de la mise en page) — sans ça, le site devient
   "glissable" vers la droite sur mobile, avec du blanc qui apparaît au
   bout. html ET body : Safari iOS ignore parfois overflow-x sur un seul
   des deux.
   "clip" et pas "hidden" : hidden fait de body un conteneur de scroll, ce
   qui casse le position: sticky du header (il défile avec la page). clip
   coupe pareil sans créer de conteneur de scroll. hidden reste en repli
   pour les très vieux navigateurs qui ignorent clip. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

/* Les scrollIntoView (couleur à choisir, message "demande envoyée"...) ne
   doivent pas atterrir sous le header collant. */
html { scroll-padding-top: 100px; }

/* Mobile (iPhone, navigateur intégré d'Instagram) : flash blanc autour du
   header pendant le défilement. Deux causes, deux parades :
   - le fond "derrière" la page était blanc (celui du body) : il apparaissait
     quand la barre du navigateur se replie ou se déplie. Il est maintenant
     sombre (couleur du header) ; le body garde son fond blanc et couvre au
     moins tout l'écran, donc rien ne change à l'affichage normal ;
   - le rebond en haut/bas de page montre la couleur du navigateur (blanche
     dans Instagram, impossible à changer) : on supprime le rebond
     (iOS 16+, Android). */
html { background: var(--ink); overscroll-behavior-y: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
}

h1, h2, .display {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

a { color: inherit; }

/* ---------- Header ---------- */
.head {
  background: var(--ink);
  color: var(--paper);
  padding: 20px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow .2s ease;
  /* iPhone / Instagram : pendant le défilement, une fine bande en haut du
     header laissait voir la page dessous. Le header devient une couche
     unique, déplacée telle quelle par le navigateur au lieu d'être
     redessinée à chaque mouvement. */
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Ombre légère seulement une fois la page défilée (classe posée par
   catalogue.js) — sépare le header du contenu qui passe dessous. */
.head.is-scrolled { box-shadow: 0 6px 18px rgba(30, 30, 28, .18); }
/* Safari iOS : prolonge le noir du header vers le haut, hors écran. Comble
   l'espace qui apparaissait au-dessus du header (rebond quand on tire la
   page vers le bas, écart d'un pixel en défilement rapide, bande sous la
   barre d'état). Invisible en temps normal : il est au-dessus du haut de
   la page. */
.head::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* 200 px et plus 100vh : une couche immense, presque toute hors écran,
     n'était pas dessinée à temps sur iPhone pendant le défilement (d'où
     la bande transparente). Le rebond étant supprimé (html,
     overscroll-behavior), 200 px suffisent à couvrir un décalage. */
  height: 200px;
  background: var(--ink);
  pointer-events: none;
}
.head__left { display: flex; align-items: center; gap: 12px; }
.head__logo { height: 40px; width: auto; display: block; }
.head__brand { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 15px; }
.head__tag { font-weight: 600; font-size: 11px; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.head__right { display: flex; align-items: center; gap: 24px; }
.head__back { font-weight: 600; font-size: 13px; text-decoration: none; }
.head__back:hover { text-decoration: underline; }

.cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  color: var(--paper);
  text-decoration: none;
}
/* "Mon devis" en vrai bouton (contour blanc, rempli au survol) : c'est
   l'action principale du site, elle doit ressortir plus que "Catalogue".
   44 px de haut : zone tactile confortable, header toujours à 84 px. */
.cart-badge {
  padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cart-badge .cart-badge__label::after { display: none; }
@media (hover: hover) {
  .cart-badge:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  /* La pastille blanche resterait invisible sur le bouton devenu blanc. */
  .cart-badge:hover .cart-badge__count { background: var(--ink); color: var(--paper); }
}
.cart-badge:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* Très petits écrans (< 360 px) : icône seule, le libellé est déjà porté
   par l'aria-label du lien. */
@media (max-width: 359px) {
  .cart-badge { padding: 0 12px; }
  .cart-badge__label { display: none; }
}
.cart-badge__icon-wrap {
  position: relative;
  display: inline-flex;
  transition: transform .18s ease;
}
.cart-badge:hover .cart-badge__icon-wrap,
.cart-badge:focus-visible .cart-badge__icon-wrap { transform: translateY(-2px); }
.cart-badge__label {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-bottom: 2px;
}
.cart-badge__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--paper);
  transition: right .2s ease;
}
.cart-badge:hover .cart-badge__label::after,
.cart-badge:focus-visible .cart-badge__label::after { right: 0; }
.cart-badge__count {
  /* Posée sur le coin haut-droit du bouton "Mon devis" (et plus sur
     l'icône) : sur l'icône, elle recouvrait le début du libellé. */
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Petit "pop" quand un article vient d'être ajouté (voir cartUpdateBadge()
   dans catalogue.js) — jamais en boucle, juste une confirmation visuelle
   discrète au moment de l'ajout. */
.cart-badge__count.is-bump { animation: cart-count-bump .4s ease; }
@keyframes cart-count-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(.92); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-badge__icon-wrap { transition: none; }
  .cart-badge__count.is-bump { animation: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 104px 56px 56px; max-width: 880px; overflow: hidden; }
.hero__eyebrow { font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); margin: 0 0 16px; }
.hero__title { font-size: 52px; font-weight: 400; line-height: 1.08; margin: 0 0 20px; color: var(--ink); }
.hero__title b { font-weight: 600; }
/* Sur-titre dans le H1 du catalogue (mot-clé « impression textile Lyon »),
   même style que celui de l'accueil ; prend la couleur du titre. */
.hero__kicker {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.hero__intro { font-size: 16px; color: var(--ink-secondary); max-width: 58ch; margin: 0; }

/* ---------- Bannière optionnelle (Admin > Thème) ---------- */
/* Pleine largeur + hauteur minimum dès qu'une bannière est active : la photo
   a vraiment de la place pour s'étirer sur tout le bandeau, plutôt que sur
   la seule colonne de texte (880px). Le texte, lui, reste dans une colonne
   lisible via .hero__content. */
.hero--has-banner { max-width: none; min-height: 420px; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Le voile doit être AU-DESSUS de la photo (z-index 1 > 0) : ::before est
   inséré avant les autres enfants dans l'ordre du document, donc à z-index
   égal il se retrouvait peint sous <img class="hero__bg"> — invisible quel
   que soit le réglage d'opacité (bug repéré au retour visuel de Lorenzo). */
.hero--has-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--hero-overlay-a, .7));
  z-index: 1;
}
.hero__content { position: relative; z-index: 2; max-width: 880px; }

/* Texte clair : bannière sombre, voile assombri plutôt qu'éclairci — même
   variable d'opacité, juste une teinte de base différente. */
.hero--text-light .hero__title,
.hero--text-light .hero__intro { color: var(--paper); }
.hero--text-light::before { background: rgba(30, 30, 28, var(--hero-overlay-a, .7)); }

/* Voile réglable (Admin > Thème, slider par pas de 10) : une seule variable
   CSS pilotée par classe — jamais de style="" inline (CSP stricte). */
.hero--opacity-0 { --hero-overlay-a: 0; }
.hero--opacity-10 { --hero-overlay-a: .1; }
.hero--opacity-20 { --hero-overlay-a: .2; }
.hero--opacity-30 { --hero-overlay-a: .3; }
.hero--opacity-40 { --hero-overlay-a: .4; }
.hero--opacity-50 { --hero-overlay-a: .5; }
.hero--opacity-60 { --hero-overlay-a: .6; }
.hero--opacity-70 { --hero-overlay-a: .7; }
.hero--opacity-80 { --hero-overlay-a: .8; }
.hero--opacity-90 { --hero-overlay-a: .9; }
.hero--opacity-100 { --hero-overlay-a: 1; }

/* Position de la photo dans son cadre (recadrage) — 3x3, choisie en admin. */
.hero__bg--pos-top-left { object-position: left top; }
.hero__bg--pos-top-center { object-position: center top; }
.hero__bg--pos-top-right { object-position: right top; }
.hero__bg--pos-center-left { object-position: left center; }
.hero__bg--pos-center-center { object-position: center center; }
.hero__bg--pos-center-right { object-position: right center; }
.hero__bg--pos-bottom-left { object-position: left bottom; }
.hero__bg--pos-bottom-center { object-position: center bottom; }
.hero__bg--pos-bottom-right { object-position: right bottom; }

@media (max-width: 760px) {
  .hero--has-banner { min-height: 320px; }
}

/* ---------- Filtres ---------- */
.filters {
  padding: 0 56px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter {
  padding: 16px 0;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.filter.is-active { border-bottom-color: var(--ink); }

/* ---------- Catégories en "story" (rond photo + libellé) ---------- */
.filter.cat-story,
.cat-story--link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 2px 12px;
  border-bottom: none;
  flex: none;
}
.cat-story__ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--border);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: border-color .15s, color .15s;
}
.filter.cat-story.is-active .cat-story__ring,
.filter.cat-story:hover .cat-story__ring,
.filter.cat-story:focus-visible .cat-story__ring,
.cat-story--link:hover .cat-story__ring,
.cat-story--link:focus-visible .cat-story__ring { border-color: var(--ink); color: var(--ink); }
.cat-story--link { text-decoration: none; }
.cat-story--link:focus-visible { outline: none; }
.cat-story__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cat-story__img--empty { background: var(--photo-bg); }
.cat-story__label { font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
.filter.cat-story.is-active .cat-story__label { color: var(--ink); }

/* ---------- Barre de catégories collante (créée par catalogue.js) ----------
   Apparaît sous le header quand la rangée de catégories sort de l'écran :
   pastilles compactes (petite photo ronde + nom), la catégorie active en
   noir. */
.filters-bar {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 20px -14px rgba(30, 30, 28, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.filters-bar.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease; }
.filters-bar__track {
  display: flex;
  gap: 8px;
  padding: 10px 56px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filters-bar__track::-webkit-scrollbar { display: none; }
.filters-bar__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filters-bar__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--photo-bg);
  color: var(--ink-muted);
}
.filters-bar__dot img, .filters-bar__dot .cat-story__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.filters-bar__dot svg { width: 16px; height: 16px; }
a.filters-bar__btn { text-decoration: none; }
.filters-bar__btn:hover { border-color: var(--ink); }
.filters-bar__btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters-bar__btn.is-active .filters-bar__dot { box-shadow: 0 0 0 2px var(--paper); }
.filters-bar__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Centré sans bloquer le défilement si la rangée déborde (marges auto). */
.filters-bar__btn:first-child { margin-left: auto; }
.filters-bar__btn:last-child { margin-right: auto; }
@media (max-width: 760px) {
  .filters-bar__track { padding: 8px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .filters-bar, .filters-bar.is-visible { transition: none; transform: none; }
}

/* ---------- Liste index ---------- */
/* Grille de cards, mobile-first : 1 colonne < 640px, 2 de 640 à 1024px, 3 au-delà. */
.list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 20px;
  padding: 32px 20px 56px;
}
.empty { padding: 56px 0; color: var(--ink-secondary); grid-column: 1 / -1; }

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--paper);
}
/* [hidden] et display:flex ont la même spécificité CSS : sans cette règle,
   notre display:flex l'emporte sur le display:none natif de l'attribut
   hidden, et le filtre catégorie (qui fait juste card.hidden = true en JS)
   ne cache plus rien visuellement. */
.card[hidden] { display: none; }

/* Règle photo unique pour tout le catalogue (grille, fiche, vignettes) :
   cadre CARRÉ, photo entière (contain, jamais recadrée) sur fond blanc.
   Les photos fournisseur sont carrées à ~90 % et remplissent le cadre pile ;
   les autres (ex. JZ 180, légèrement paysage, fond blanc) gagnent des marges
   blanches invisibles. Le cadre ne change jamais de taille, donc rien ne
   saute au clic sur une couleur. Les uploads sont normalisés côté serveur
   (WebP, 1200 px max — voir upload_normalize_image). */
.card__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* Exception de la grille : la photo de couverture REMPLIT le cadre (cover),
   jamais de bord blanc en vitrine. La photo entière reste visible sur la
   fiche produit (contain), où le détail compte. */
.card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 28, 0);
  transition: background-color .18s ease;
  pointer-events: none;
}
.card__photo:hover::after,
.card__photo:focus-visible::after {
  background: rgba(30, 30, 28, .18);
}

.card__view {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.card__photo:hover .card__view,
.card__photo:focus-visible .card__view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Tactile : pas de vrai "hover" au toigt, on affiche au tap via :active
   pour donner le même indice visuel avant la navigation. */
@media (hover: none) {
  .card__photo:active::after { background: rgba(30, 30, 28, .18); }
  .card__photo:active .card__view { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 9px;
  z-index: 1;
}

.card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__ref { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin: 0; }
.card__name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; margin: 0; line-height: 1.25; }
.card__name a { text-decoration: none; color: inherit; }
.card__name a:hover { text-decoration: underline; }
.card__tagline { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.card__desc {
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__specs { display: flex; flex-direction: column; margin-top: 2px; }

.card__price { margin-top: auto; padding-top: 10px; }

@media (min-width: 640px) {
  .list { grid-template-columns: repeat(2, 1fr); padding: 40px 32px 64px; gap: 32px 24px; }
}
@media (min-width: 1024px) {
  .list { grid-template-columns: repeat(3, 1fr); padding: 48px 56px 72px; gap: 40px 28px; }
  /* Centré seulement quand la rangée tient dans l'écran (peu de catégories) —
     au-delà, le débordement redevient scrollable et reste collé à gauche,
     sinon le début de la liste serait inaccessible au scroll. */
  .filters:not(.is-overflowing) { justify-content: center; }
}

.swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swatches .info-tip { margin-left: 2px; }
.swatches .info-tip__bubble { left: auto; right: 0; }
.swatch { position: relative; display: inline-flex; }
.swatch--mono { font-size: 11px; color: var(--ink-secondary); }
.swatch--clickable { cursor: pointer; }
.swatch--clickable svg circle { transition: stroke .12s ease, stroke-width .12s ease; }
.swatch--clickable:hover svg circle, .swatch--clickable:focus-visible svg circle { stroke: var(--ink); stroke-width: 1.5; }
.swatch.is-selected svg circle { stroke: var(--ink); stroke-width: 2; }
.swatch--mono.is-selected { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Remplace l'ancienne bulle au survol/tap (buggée sur mobile, débordait ou
   recouvrait l'écran) : un texte fixe, identique desktop/mobile, affiché
   dès qu'une couleur est choisie — jamais de positionnement à gérer. */
.pdp__color-selected { font-size: 13px; color: var(--ink-secondary); margin: 8px 0 0; }
.pdp__color-selected[hidden] { display: none; }
.pdp__color-selected span { font-weight: 600; color: var(--ink); }

.sizes-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.sizes-toggle svg { flex: none; }
.sizes-toggle:hover { background: var(--photo-bg); }

/* ---------- Guide des tailles (mini pop-up) ---------- */
.sizes-modal {
  border: none;
  padding: 24px;
  width: calc(100% - 40px);
  max-width: 380px;
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(30, 30, 28, .16);
}
.sizes-modal::backdrop { background: rgba(30, 30, 28, .55); }
.sizes-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sizes-modal__title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; margin: 0; }
.sizes-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--border);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.sizes-modal__close:hover { background: var(--photo-bg); }

.sizes-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sizes-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sizes-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-table); }
.sizes-table tbody tr:nth-child(even) { background: var(--photo-bg); }
.sizes-table tbody tr:last-child td { border-bottom: none; }
.sizes-table td:first-child { font-weight: 700; }
.sizes__empty { font-size: 13px; color: var(--ink-secondary); }

.photo-placeholder { color: var(--ink-muted); font-size: 11px; text-transform: uppercase; }

.price__from { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
.price__amounts { display: flex; align-items: baseline; gap: 8px; }
.price__ht { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; color: var(--ink); }
.price__ttc { font-size: 12px; color: var(--ink-muted); }

/* ---------- Contact ---------- */
.contact { background: var(--ink); color: var(--paper); padding: 104px 56px; }
.contact__eyebrow { color: rgba(255, 255, 255, .55); margin: 0 0 20px; font-size: 14px; }
.contact__email {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 38px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 10px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.contact__note { color: rgba(255, 255, 255, .6); font-size: 13px; margin: 20px 0 0; }

/* "Écrivez-nous →" : la flèche pousse doucement toute seule (visible aussi
   sur mobile, sans survol) ; au survol, elle file à droite et le
   soulignement se redessine de gauche à droite. */
.contact__cta { display: inline-flex; align-items: baseline; gap: .3em; color: var(--paper); text-decoration: none; }
.contact__cta-label { position: relative; padding-bottom: 6px; }
.contact__cta-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  transform-origin: left;
}
.contact__cta-arrow { display: inline-block; animation: cta-nudge 2.8s ease-in-out infinite; transition: transform .3s ease; }
@keyframes cta-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  70% { transform: translateX(8px); }
  85% { transform: translateX(2px); }
}
@keyframes cta-underline {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (hover: hover) {
  .contact__cta:hover .contact__cta-arrow { animation: none; transform: translateX(14px); }
  .contact__cta:hover .contact__cta-label::after { animation: cta-underline .45s ease; }
}
.contact__cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .contact__cta-arrow { animation: none; transition: none; }
  .contact__cta:hover .contact__cta-label::after { animation: none; }
}

/* ---------- Footer ---------- */
.foot {
  padding: 22px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 11px;
  color: var(--ink-muted);
}
.foot a { text-decoration: underline; }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* Liens qui ouvrent une fenêtre (mentions, confidentialité) : vrais boutons
   pour l'accessibilité, mais avec l'apparence d'un lien souligné. */
.foot__legal,
.link-inline {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.foot__legal:hover { color: var(--ink); }

/* ---------- Fenêtres légales (mentions, confidentialité) ---------- */
.legal-modal {
  border: none;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 680px;
  max-height: min(85vh, 820px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(30, 30, 28, .16);
}
.legal-modal[open] { display: flex; flex-direction: column; }
.legal-modal::backdrop { background: rgba(30, 30, 28, .55); }
html.has-legal-modal { overflow: hidden; }
.legal-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.legal-modal__title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; margin: 0; }
.legal-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--border);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.legal-modal__close:hover { background: var(--photo-bg); }
.legal-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 24px 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-secondary);
}
.legal-modal__body h3 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 20px 0 6px; }
.legal-modal__body p { margin: 0 0 8px; }
.legal-modal__body ul { margin: 0 0 8px; padding-left: 18px; }
.legal-modal__body li { margin-bottom: 4px; }
.legal-modal__body a { color: var(--ink); }
.legal-modal__updated { font-size: 12px; color: var(--ink-muted); }
@media (max-width: 760px) {
  .legal-modal__head { padding: 14px 16px; }
  .legal-modal__body { padding: 4px 16px 20px; }
}

/* Pages /mentions-legales et /confidentialite : même texte que la fenêtre,
   en page de lecture (largeur de colonne confortable, texte plus grand). */
.legal-modal__loading { color: var(--ink-muted); }
/* Page 404 : même colonne que les pages légales, bouton du devis vide. */
.notfound-page__lead { margin: 0 0 28px; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink-secondary); }
.notfound-page__links { margin: 28px 0 0; font-size: 15px; color: var(--ink-muted); }
.notfound-page__links a { color: var(--ink); font-weight: 600; }
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}
.legal-page__title {
  margin: 0 0 28px;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
}
.legal-page__body { font-size: 15px; line-height: 1.65; color: var(--ink-secondary); overflow-wrap: anywhere; }
.legal-page__body h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 32px 0 8px; }
.legal-page__body p { margin: 0 0 10px; }
.legal-page__body ul { margin: 0 0 10px; padding-left: 20px; }
.legal-page__body li { margin-bottom: 6px; }
.legal-page__body a { color: var(--ink); }
@media (min-width: 761px) {
  .legal-page { padding: 64px 56px 96px; }
}
.foot .foot__social { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-muted); }
.foot__social:hover { color: var(--ink); }

/* ---------- Fiche produit (mobile-first : empilée, 2 colonnes dès 1024px) ---------- */
/* Largeur plafonnée + centrée : sans ça, sur un grand écran, la galerie à
   44% de la ligne (voir plus bas) s'étire sans limite et devient énorme,
   et le contenu reste collé au bord gauche au lieu d'être centré. */
.pdp__back-wrap { max-width: 1280px; margin: 0 auto; padding: 20px 20px 0; }
.pdp__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-decoration: none;
}
.pdp__back:hover { color: var(--ink); text-decoration: underline; }

.pdp {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px 56px;
}

.pdp__gallery { display: flex; flex-direction: column; gap: 10px; }
/* Même règle que la grille (voir .card__photo) : cadre carré stable. */
.pdp__main-photo {
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pdp__main-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.pdp__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.thumb {
  flex: none;
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.is-active { border-color: var(--ink); border-width: 2px; }

.pdp__info { display: flex; flex-direction: column; gap: 16px; }
.pdp__ref { font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); margin: 0; }
.pdp__name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 600; margin: 0; line-height: 1.15; }
.pdp__tagline { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.pdp__desc { font-size: 15px; color: var(--ink-secondary); margin: 0; }

.pdp__specs { display: flex; flex-direction: column; margin-top: 4px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-table);
  font-size: 13px;
}
.spec-row span { color: var(--ink-muted); }
.spec-row b { font-weight: 600; color: var(--ink); text-align: right; }

.pdp__colors { margin-top: 4px; }
.pdp__colors.is-flagged .swatch { animation: colors-flag-pulse 1.6s ease; border-radius: 50%; }
.pdp__colors.is-flagged .swatch--mono { border-radius: 2px; }
@keyframes colors-flag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 44, 34, 0); }
  15%, 45% { box-shadow: 0 0 0 3px var(--danger); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp__colors.is-flagged .swatch { animation: none; }
}

.pdp__price { padding: 8px 0; }
.pdp__price .price__ht { font-size: 26px; }
.pdp__price .price__ttc { font-size: 13px; }
.price__from { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 2px; }
.price__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--photo-bg);
  border: 1px solid var(--border);
}
.price__note p { margin: 0; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.45; }
.price__note b { color: var(--ink); font-weight: 600; }
.price__note-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--ink-secondary);
  border-radius: 50%;
  color: var(--ink-secondary);
}

.btn-copy-ref {
  width: 100%;
  min-height: 48px;
  padding: 14px 24px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  margin-top: 8px;
}
.btn-copy-ref:hover { background: #2b2b29; }
.btn-copy-ref.is-done { background: var(--ink-secondary); border-color: var(--ink-secondary); }

.btn-copy-ref--small { width: auto; min-height: 36px; padding: 8px 16px; font-size: 11px; margin-top: 0; flex: none; }

.quote-added {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--photo-bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink);
}
.quote-added[hidden] { display: none; }
.quote-added__icon { flex: none; color: var(--ink); }
.quote-added span { font-weight: 600; }
.quote-added__link {
  margin-left: auto;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  white-space: nowrap;
}
.quote-added__link:hover { color: var(--ink-secondary); border-color: var(--ink-secondary); }

.product-notfound { padding: 96px 20px; text-align: center; color: var(--ink-secondary); }
.product-notfound a { color: var(--ink); font-weight: 600; }

@media (min-width: 1024px) {
  .pdp__back-wrap { padding: 32px 56px 0; }
  .pdp {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
    padding: 24px 56px 56px;
  }
  .pdp__gallery { flex: 0 0 44%; position: sticky; top: 96px; }
  .pdp__info { flex: 1; padding-top: 4px; max-width: 480px; }
  .pdp__name { font-size: 32px; }
  .btn-copy-ref { width: auto; min-width: 220px; }
}

/* ---------- Au-delà du mobile : header/hero/contact/footer gardent leur
   padding large par défaut (56px), réduit seulement sous 760px. ---------- */
@media (max-width: 760px) {
  .head, .hero, .filters, .contact, .foot { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 56px; }
  .hero__title { font-size: 34px; }
  .hero__kicker { font-size: 12px; margin-bottom: 12px; }
  .contact__email { font-size: clamp(18px, 5.6vw, 26px); text-underline-offset: 6px; }
}

/* ---------- Devis rapide (fiche produit) ---------- */
.quote-config {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp__actions-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdp__actions-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.quote-config__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); margin-bottom: 8px; }
.quote-config__label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.quote-config__label-row .quote-config__label { margin-bottom: 0; }

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.info-tip:hover, .info-tip:focus-visible, .info-tip.is-open { color: var(--ink); }
.info-tip__bubble {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-8px);
  width: 240px;
  max-width: 70vw;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 5;
}
.info-tip:hover .info-tip__bubble,
.info-tip:focus-visible .info-tip__bubble,
.info-tip.is-open .info-tip__bubble { opacity: 1; pointer-events: auto; }

/* Sur mobile, une bulle ancrée au bord de l'icône déborde forcément de
   l'écran dès que l'icône est proche d'un bord (repéré par Lorenzo : texte
   coupé à gauche sur l'icône couleurs, à droite sur celle des techniques).
   Plutôt qu'ajuster l'ancrage au cas par cas, la bulle devient un petit
   encart centré dans l'écran, toujours à 16px des bords quelle que soit
   la position de l'icône qui l'a ouverte. */
@media (max-width: 760px) {
  .info-tip__bubble,
  .swatches .info-tip__bubble {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
  }
}

.quote-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quote-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
}
.quote-tile:hover { background: var(--photo-bg); }
.quote-tile:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--photo-bg); }
.quote-tile:has(input:checked) .quote-tile__icon { color: var(--ink); }
.quote-tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.quote-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.quote-tile__icon { color: var(--ink-muted); flex: none; }
.quote-tile__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }

.quote-sizes-box { border: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.quote-sizes-box .checkbox-inline { padding-bottom: 12px; border-bottom: 1px solid var(--border-table); }

.quote-total-live { font-size: 12px; font-weight: 600; color: var(--ink-muted); margin: 0; }
.quote-total-live.is-ok { color: var(--ink); }
.quote-total-live[hidden] { display: none; }

.quote-sizes-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.quote-sizes-table td { padding: 8px 0; border-bottom: 1px solid var(--border-table); }
.quote-sizes-table tr:last-child td { border-bottom: none; }
.quote-sizes-table td:first-child { font-weight: 600; }
.quote-sizes-table td:last-child { text-align: right; }
.quote-qty {
  width: 64px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  text-align: right;
}

/* ---------- Formulaires (panier, fiche produit) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
/* [hidden] et display:flex ont la même spécificité : sans cette règle, un
   .field masqué en JS (ex. #quote-total-field) reste visible malgré
   l'attribut hidden — même piège déjà rencontré sur .card. */
.field[hidden] { display: none; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="file"],
.field textarea {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 12px;
  min-height: 44px;
  background: var(--paper);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

.hint { font-size: 12px; color: var(--ink-muted); margin: 0; }
.alert { padding: 16px; border: 1px solid var(--border); background: var(--photo-bg); font-size: 14px; }
.alert--success { display: flex; align-items: center; gap: 16px; border-color: var(--ink); }
/* [hidden] et display:flex ont la même spécificité : sans cette règle, le
   message de succès reste visible même avec l'attribut hidden posé (déjà
   vu sur .card/.field) — il s'affichait donc dès le chargement de la page. */
.alert--success[hidden] { display: none; }

.success-check { flex: none; color: var(--ink); }
.success-check__circle {
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: success-circle .5s ease-out forwards;
}
.success-check__mark {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: success-mark .3s ease-out .4s forwards;
}
@keyframes success-circle { to { stroke-dashoffset: 0; } }
@keyframes success-mark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .success-check__circle, .success-check__mark { animation: none; stroke-dashoffset: 0; }
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-secondary);
  cursor: pointer;
}
.checkbox-inline a { color: var(--ink); text-decoration: underline; }

/* Carré plein encre + coche blanche (au lieu du rendu natif du navigateur,
   trop terne / pas cohérent avec le reste du site) — même traitement que
   les cases à cocher de l'admin. */
.checkbox-inline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  border: 1.5px solid var(--border);
  background: var(--paper);
  position: relative;
  cursor: pointer;
  flex: none;
}
.checkbox-inline input[type="checkbox"]:hover { border-color: var(--ink); }
.checkbox-inline input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.checkbox-inline input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-inline input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Panier ---------- */
.cart-page { padding: 8px 20px 56px; display: flex; flex-direction: column; gap: 24px; max-width: 720px; margin: 0 auto; }
.cart-page h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 600; margin: 0; }
.cart-page h2 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; margin: 0; }

.cart-form { display: flex; flex-direction: column; gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }

.cart-item {
  border: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-item__top { display: flex; gap: 14px; }
.cart-item__photo {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--border);
}
.cart-item__photo--empty { background: var(--photo-bg); }
.cart-item__top-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-item__head h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; margin: 0; }
.cart-item__remove { font-size: 12px; font-weight: 600; text-decoration: underline; color: var(--ink-secondary); min-height: 32px; }
.cart-item__remove:hover { color: var(--ink); }
.cart-item__sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.cart-item__files { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.cart-item__file-error { color: var(--danger); margin: 0; }
.cart-item__toolarge { font-size: 12px; }

/* Une carte compacte par emplacement : nom + pastilles de technique sur une
   même ligne, la zone de dépôt juste en dessous — plus de gros blocs de
   texte répétés à chaque logo. */
.logo-slot { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); }
.logo-slot__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.logo-slot__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.logo-slot__techniques { display: flex; flex-wrap: wrap; gap: 6px; }

.tech-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink-secondary);
  cursor: pointer;
}
.tech-pill:hover { border-color: var(--ink); }
.tech-pill:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tech-pill:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.tech-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 14px;
  border: 1.5px dashed var(--border);
  text-align: center;
  cursor: pointer;
}
.logo-dropzone:hover, .logo-dropzone.is-dragover { border-color: var(--ink); background: var(--photo-bg); }
.logo-dropzone.has-file { border-style: solid; border-color: var(--ink); }
.logo-dropzone__icon { color: var(--ink-muted); flex: none; }
.logo-dropzone.has-file .logo-dropzone__icon { color: var(--ink); }
.logo-dropzone__text { font-size: 12px; color: var(--ink-muted); }
.logo-dropzone__filename { font-size: 13px; font-weight: 600; word-break: break-all; padding: 0 8px; }

@media (min-width: 1024px) {
  .cart-page { padding: 24px 56px 72px; max-width: 760px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Formulaire de devis : champs obligatoires + adresses ---------- */
.req { color: #b3261e; font-weight: 700; }
.form-legend { margin: -12px 0 0; }
.address-block[hidden] { display: none; }
.address-block { display: flex; flex-direction: column; gap: 24px; }
.address-block h2 { margin-bottom: 0; }
.btn-link {
  align-self: flex-start;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { text-decoration-thickness: 2px; }
.btn-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.field__label { display: block; line-height: 1.3; }
.field__label .req { margin-left: 2px; }
.grid-2 { align-items: start; }
.cart-form .grid-2 { gap: 24px; }

/* Suggestions d'adresse */
.field--suggest { position: relative; }
.address-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  margin: -1px 0 0; padding: 0; list-style: none;
  background: var(--paper, #fff); border: 1px solid var(--ink);
  font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink);
}
.address-suggest[hidden] { display: none; }
.address-suggest li { padding: 12px; cursor: pointer; border-top: 1px solid var(--border); }
.address-suggest li:first-child { border-top: 0; }
.address-suggest li:hover, .address-suggest li.is-active { background: var(--surface, #f4f3f0); }
.address-suggest .address-suggest__msg { cursor: default; color: var(--ink-muted); font-size: 13px; }
.address-suggest .address-suggest__msg:hover { background: transparent; }

/* L’attribut hidden doit primer sur les display: flex de ces blocs (formulaire affiché à vide sinon). */
.cart-form[hidden], #cart-success[hidden], #cart-empty[hidden] { display: none; }

/* ---------- Bouton "Menu" du header ----------
   Texte + deux traits ; au survol les traits s'écartent. Ouvre le menu
   plein écran (.nav-panel). Même hauteur que "Mon devis" (44 px). */
.head__menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  cursor: pointer;
}
.head__menu-icon { position: relative; display: block; width: 22px; height: 10px; }
.head__menu-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.head__menu-icon span:first-child { top: 0; }
.head__menu-icon span:last-child { top: 8.5px; }
@media (hover: hover) {
  .head__menu:hover .head__menu-icon span:first-child { transform: translateY(-2px); }
  .head__menu:hover .head__menu-icon span:last-child { transform: translateY(2px); }
}
/* Croix (bouton Fermer du panneau) */
.head__menu-icon.is-close span { top: 4.25px; }
.head__menu-icon.is-close span:first-child { transform: rotate(45deg); }
.head__menu-icon.is-close span:last-child { transform: rotate(-45deg); }
.head__menu:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* Bouton du header : icône seule, zone tactile carrée de 44 px. */
.head__menu--icon { width: 44px; padding: 0; justify-content: center; margin-right: -11px; } /* icône alignée sur la marge droite */
.head .cart-badge + .head__menu { margin-left: 14px; }

/* ---------- Menu plein écran ---------- */
.nav-panel {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
}
.nav-panel::backdrop { background: var(--ink); }
.nav-panel[open] { display: flex; flex-direction: column; }
.nav-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  flex: none;
}
.nav-panel__nav { flex: 1; display: flex; align-items: center; padding: 24px 56px; overflow-y: auto; }
.nav-panel__list { list-style: none; margin: 0; padding: 0; width: 100%; }
.nav-panel__list li { border-top: 1px solid rgba(255, 255, 255, .12); }
.nav-panel__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.nav-panel__link {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 10px 0 12px;
  color: var(--paper);
  text-decoration: none;
  transition: opacity .25s ease;
}
.nav-panel__num {
  flex: none;
  width: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}
.nav-panel__label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1;
  letter-spacing: -.045em;
  transition: transform .35s ease;
}
.nav-panel__link.is-active .nav-panel__num { color: var(--paper); }
@media (hover: hover) {
  .nav-panel__list:hover .nav-panel__link { opacity: .35; }
  .nav-panel__list .nav-panel__link:hover { opacity: 1; }
  .nav-panel__link:hover .nav-panel__label { transform: translateX(14px); }
}
.nav-panel__link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.nav-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding: 20px 56px 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  flex: none;
}
.nav-panel__foot p { margin: 0; }
.nav-panel__foot a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.nav-panel__foot a:hover { border-bottom-color: var(--paper); }
html.has-nav-panel { overflow: hidden; }
/* Changement de page depuis le menu : le panneau reste affiché, les liens
   s'estompent pendant le chargement (au lieu de montrer l'ancienne page). */
.nav-panel.is-leaving .nav-panel__nav,
.nav-panel.is-leaving .nav-panel__foot { opacity: .25; transition: opacity .25s ease; }

/* Apparition : les liens montent un par un (classe .is-open posée par catalogue.js). */
.nav-panel__list li { opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; }
.nav-panel.is-open .nav-panel__list li { opacity: 1; transform: none; }
.nav-panel.is-open .nav-panel__list li:nth-child(2) { transition-delay: .05s; }
.nav-panel.is-open .nav-panel__list li:nth-child(3) { transition-delay: .1s; }
.nav-panel.is-open .nav-panel__list li:nth-child(4) { transition-delay: .15s; }
.nav-panel.is-open .nav-panel__list li:nth-child(5) { transition-delay: .2s; }
.nav-panel.is-open .nav-panel__list li:nth-child(6) { transition-delay: .25s; }

@media (max-width: 760px) {
  .nav-panel__top { padding: 20px; }
  .nav-panel__nav { padding: 12px 20px; align-items: flex-start; }
  .nav-panel__link { gap: 14px; padding: 12px 0 14px; }
  .nav-panel__num { width: 22px; }
  .nav-panel__foot { padding: 16px 20px 24px; flex-direction: column; }
  .head .cart-badge + .head__menu { margin-left: 6px; }
}
/* Très petits écrans : le libellé "Menu" disparaît, les deux traits suffisent
   (le bouton garde son nom pour les lecteurs d'écran via le texte masqué). */
@media (max-width: 359px) {
  .head__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel__list li, .nav-panel__label, .head__menu-icon span { transition: none; }
}

/* Page devis : le pied de page reste en bas de l'écran même quand le contenu
   est court (message d'envoi réussi, devis vide). */
.page-devis { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-devis > .pdp__back-wrap, .page-devis > .cart-page { width: 100%; }
.page-devis > .cart-page { flex: 1 0 auto; }
/* Page 404 : même principe, le contenu est court. */
.page-notfound { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.page-notfound > .notfound-page { flex: 1 0 auto; width: 100%; }

/* ---------- Recherche produits (loupe du header) ---------- */
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--paper); cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.search-toggle:hover, .search-toggle:focus-visible { transform: translateY(-2px); }
.search-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }
.search-toggle.is-open { opacity: .65; }
.head__right { gap: 8px; }
.search-bar {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 0 20px 14px; background: var(--ink);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}
.search-bar[hidden] { display: none; }
.search-bar input {
  display: block; width: 100%; max-width: 560px; margin: 0 auto;
  height: 44px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--paper); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.search-bar input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* Mobile : pas de loupe dans le header (demande du 2026-10-02), le header
   reste réservé à "Catalogue" et "Mon devis". */
@media (max-width: 760px) {
  .search-toggle, .search-bar { display: none; }
}

/* ---------- Stock fournisseur (fiche produit) ---------- */
.pdp__stock { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--ink); font-size: 13px; }
.pdp__stock[hidden] { display: none; }
.pdp__stock[data-level="low"] { border-left-color: #b26a00; }
.pdp__stock[data-level="out"] { border-left-color: #b3261e; }
.pdp__stock-main { margin: 0; font-weight: 600; }
.pdp__stock-sizes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-secondary); }
.pdp__stock-sizes b { color: var(--ink); font-weight: 700; }
.pdp__stock-sizes .is-out { opacity: .45; text-decoration: line-through; }
.swatch.is-out-of-stock { position: relative; opacity: .55; }
.swatch.is-out-of-stock::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; background: var(--ink); transform: rotate(-45deg); pointer-events: none; }

/* ---------- Pictos bio / vegan ---------- */
.eco-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.eco-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--border);
}
/* Grille : mini pictos ronds posés sur la photo, en bas à gauche (le badge best-seller reste en haut) */
.card__photo > .eco-badges { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.eco-badges:not(.eco-badges--labelled) .eco-badge { width: 26px; height: 26px; border-radius: 50%; }
/* Fiche produit : pastille + texte sous le titre */
.eco-badges--labelled { margin: 2px 0 4px; }
.eco-badges--labelled .eco-badge { padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
/* Couleurs des pictos : bio = vert, vegan = orange terre cuite (contraste texte ≥ 4.5:1 sur leur fond teinté) */
.eco-badge--bio { color: #2e7d4f; background: #f1f8f3; border-color: rgba(46, 125, 79, .45); }
.eco-badge--vegan { color: #b4541f; background: #fdf4ee; border-color: rgba(180, 84, 31, .45); }

/* ---------- Carte produit entièrement cliquable ----------
   Le lien du titre est "étiré" sur toute la carte (::after en position absolue) :
   un seul lien par produit (accessible, une seule tabulation), mais toute la zone
   mène à la fiche. La photo garde son lien, retiré de la tabulation (doublon). */
.card { position: relative; transition: border-color .18s ease, box-shadow .18s ease; }
.card__name a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.card:hover { border-color: var(--ink); box-shadow: 0 10px 28px -18px rgba(30, 30, 28, .45); }
.card:hover .card__name a { text-decoration: underline; }
/* L'effet de survol de la photo se déclenche désormais n'importe où sur la carte */
.card:hover .card__photo::after,
.card:has(.card__name a:focus-visible) .card__photo::after { background: rgba(30, 30, 28, .18); }
.card:hover .card__view,
.card:has(.card__name a:focus-visible) .card__view { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card:has(.card__name a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.card__name a:focus-visible { outline: none; }
@media (hover: none) {
  .card:active .card__photo::after { background: rgba(30, 30, 28, .18); }
  .card:active .card__view { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Logo du header : hauteur fixe (40 px) quel que soit le fichier de logo choisi ;
   un logo très large est plafonné en largeur, jamais déformé. */
.head__logo { height: 40px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }

/* =====================================================================
   Page Contact (contact.php) : présentation à gauche, formulaire à droite
   sur ordinateur, l'un sous l'autre sur mobile. Mêmes champs (.field) que
   le formulaire de devis.
   ===================================================================== */
.contact-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}
.contact-page__title {
  margin: 0;
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}
.contact-page__lead { margin: 18px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--ink-secondary); }
.contact-page__tip a { color: var(--ink); text-underline-offset: 3px; }
.contact-page__tip { margin: 24px 0 0; max-width: 40ch; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.contact-page__form { display: flex; flex-direction: column; gap: 20px; }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.contact-form .grid-2 { gap: 22px; }
.contact-form .btn-copy-ref { align-self: flex-start; width: auto; padding-left: 32px; padding-right: 32px; }
.field select {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--border); border-radius: 0;
  min-height: 44px; padding: 0 12px;
}
.field select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.contact-page__errors { border-color: #b3261e; background: #fdf3f1; color: #8a2c22; }
.contact-page__errors ul { margin: 8px 0 0; padding-left: 18px; }
.contact-page__success { font-size: 15px; }
/* Champ piège anti-robot : hors écran, jamais visible ni focalisable au clavier. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 1024px) {
  .contact-page { grid-template-columns: 5fr 7fr; gap: 80px; padding: 64px 56px 96px; }
  .contact-page__intro { position: sticky; top: 120px; align-self: start; }
}
@media (max-width: 760px) {
  .field select, .contact-form input, .contact-form textarea { font-size: 16px; } /* pas de zoom iOS */
  .contact-form .btn-copy-ref { align-self: stretch; }
}

/* =====================================================================
   Page devis vide (#cart-empty) : tout pousse vers le catalogue.
   ===================================================================== */
.cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 0 8px; border-top: 1px solid var(--ink); }
.cart-empty__icon { color: var(--ink); margin-top: 16px; }
.cart-page .cart-empty__title {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.cart-empty__lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
.cart-empty__steps { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
.cart-empty__steps li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cart-empty__steps b { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; min-width: 18px; }
.cart-empty__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; margin-top: 8px;
  background: var(--ink); color: var(--paper);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.cart-empty__cta-arrow { display: inline-block; animation: cta-nudge 2.8s ease-in-out infinite; transition: transform .3s ease; }
@media (hover: hover) {
  .cart-empty__cta:hover { background: var(--paper); color: var(--ink); }
  .cart-empty__cta:hover .cart-empty__cta-arrow { animation: none; transform: translateX(8px); }
}
.cart-empty__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cart-empty__picks { width: 100%; margin-top: 28px; }
.cart-empty__picks-title { margin: 0 0 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.cart-empty__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
.cart-empty__pick { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.cart-empty__pick-photo { display: block; aspect-ratio: 1; background: var(--photo-bg); overflow: hidden; }
.cart-empty__pick-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.cart-empty__pick-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cart-empty__pick-price { font-size: 12px; color: var(--ink-muted); }
@media (hover: hover) {
  .cart-empty__pick:hover .cart-empty__pick-photo img { transform: scale(1.05); }
  .cart-empty__pick:hover .cart-empty__pick-name { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 640px) {
  .cart-empty__steps { grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
  .cart-empty__steps li { flex-direction: column; gap: 4px; }
  .cart-empty__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 639px) {
  .cart-empty__cta { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-empty__cta-arrow { animation: none; transition: none; }
  .cart-empty__pick-photo img { transition: none; }
}

/* ---------- Page Contact : bannière "Pour un devis, passe par le catalogue" ----------
   Bannière noire entièrement cliquable. Picto : un t-shirt qui se dessine,
   puis le "marquage" apparaît sur la poitrine (boucle de 4,5 s). */
.contact-tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: center;
  margin-top: 28px;
  padding: 22px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-tip__icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 1px solid rgba(255, 255, 255, .25);
}
.contact-tip__shirt { stroke-dasharray: 100; stroke-dashoffset: 100; animation: tip-draw 4.5s ease-in-out infinite; }
.contact-tip__print {
  fill: currentColor; stroke: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: tip-print 4.5s ease-in-out infinite;
}
@keyframes tip-draw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  40%, 85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes tip-print {
  0%, 42% { opacity: 0; transform: scale(.3); }
  52% { opacity: 1; transform: scale(1.15); }
  58%, 85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.contact-tip__body { display: flex; flex-direction: column; gap: 4px; }
.contact-tip__body b { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.contact-tip__body span { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .65); }
.contact-tip__cta {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: start;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  width: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600;
}
.contact-tip__arrow { display: inline-block; animation: cta-nudge 2.8s ease-in-out infinite; transition: transform .3s ease; }
@media (hover: hover) {
  .contact-tip:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(30, 30, 28, .6); }
  .contact-tip:hover .contact-tip__arrow { animation: none; transform: translateX(8px); }
}
.contact-tip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .contact-tip__shirt { animation: none; stroke-dashoffset: 0; }
  .contact-tip__print { animation: none; opacity: 1; transform: none; }
  .contact-tip__arrow { animation: none; }
  .contact-tip { transition: none; }
}

/* ---------- Header : bouton "Catalogue" (picto t-shirt + étiquette New) ----------
   Discret à côté de "Mon devis" (qui reste l'action principale) : pas de
   cadre, picto + libellé. L'étiquette "New" a un reflet qui passe toutes
   les 4 s. Mobile : picto seul. */
.head__cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 6px;
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.head__cat-icon { position: relative; display: inline-flex; transition: transform .18s ease; }
.head__cat-label { position: relative; padding-bottom: 2px; }
.head__cat-label::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--paper);
  transition: right .2s ease;
}
.head__cat.is-active .head__cat-label::after { right: 0; }
@media (hover: hover) {
  .head__cat:hover .head__cat-icon { transform: translateY(-2px) rotate(-6deg); }
  .head__cat:hover .head__cat-label::after { right: 0; }
}
.head__cat:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.head__cat-new {
  align-self: center;
  margin-left: -2px;
  padding: 2px 5px;
  overflow: hidden;
  background: var(--paper) linear-gradient(105deg, transparent 35%, rgba(30, 30, 28, .22) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  color: var(--ink);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: cat-new-shine 4s ease-in-out infinite;
}
@keyframes cat-new-shine {
  0%, 70% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
@media (max-width: 760px) {
  .head__cat-label { display: none; }
  .head__cat { width: 44px; justify-content: center; padding: 0; margin-right: 8px; }
  /* Mobile (picto seul) : l'étiquette se pose sur le coin du t-shirt. */
  .head__cat-new { position: absolute; top: 3px; right: -6px; margin: 0; padding: 1px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .head__cat-new { animation: none; }
  .head__cat-icon { transition: none; }
}


/* =====================================================================
   Correctifs mobile (audit du 2026-10-05)
   ===================================================================== */
/* Champs à 16 px minimum sur téléphone : en dessous, l'iPhone zoome dès
   qu'on touche le champ et la page reste zoomée (surtout dans Instagram).
   Sélecteur volontairement fort : il doit passer devant
   ".field input[type=…]" (14 px). Ordinateur inchangé. */
@media (max-width: 760px) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  body textarea:not([hidden]),
  body select:not([hidden]) { font-size: 16px; }
}

/* Page contact : la colonne d'infos ne doit plus imposer sa largeur (l'adresse
   email, d'un seul tenant, poussait tout le contenu hors de l'écran sous
   ~370 px de large). */
.contact-page > * { min-width: 0; }

/* Mobile : le lien "← Retour au catalogue" du header (page produit
   introuvable) poussait le menu hors du bord ; il est déjà dans la page. */
@media (max-width: 760px) {
  .head .head__back { display: none; }
}

/* ---------- Page contact (07/10/2026) : titre + sur-titre, encart catalogue
   compact, formulaire en 3 étapes numérotées, objet en boutons à toucher. */
.contact-page__kicker {
  display: block;
  margin-bottom: 18px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-page__title { font-size: clamp(40px, 6.4vw, 80px); line-height: .98; }
/* Encart catalogue : une seule ligne (icône, texte, flèche). */
.contact-tip { grid-template-columns: auto 1fr auto; padding: 18px 20px; }
.contact-tip__icon { width: 52px; height: 52px; }
.contact-tip__icon svg { width: 40px; height: 40px; }
.contact-tip__cta { grid-column: auto; width: auto; padding-top: 0; border-top: 0; font-size: 22px; }

.contact-form { gap: 0; }
.cf-step { padding: 22px 0 30px; min-width: 0; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 20px; }
.cf-step__head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 2px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.cf-step__num { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-muted); }
.cf-field { display: flex; flex-direction: column; gap: 10px; }
/* Même style que les libellés des champs (.field) : majuscules, gris. */
.cf-field > .field__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.cf-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }

/* Objet : radios en boutons carrés (filet 1 px, noir quand choisi). */
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip { position: relative; display: inline-flex; cursor: pointer; }
.cf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); background: var(--paper);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cf-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .cf-chip:hover span { border-color: var(--ink); } }

/* Rappel affiché seulement quand l'objet « Demande de devis » est choisi (CSS seul). */
.cf-devis-hint {
  display: none; align-self: flex-start;
  padding: 10px 14px; border-left: 2px solid var(--ink); background: var(--photo-bg);
  font-size: 14px; line-height: 1.45; color: var(--ink); text-decoration: none;
}
.cf-devis-hint span { font-weight: 600; }
.contact-form:has(input[name="objet"][value="devis"]:checked) .cf-devis-hint { display: block; }

.cf-captcha input { max-width: 160px; }
.cf-submit { align-self: flex-start; margin-top: 4px; cursor: pointer; font-size: 15px; }
.cf-legend { margin: 0; }
@media (max-width: 760px) {
  .contact-page__kicker { font-size: 11px; margin-bottom: 14px; }
  .contact-tip { gap: 12px 14px; padding: 16px; }
  .contact-tip__body b { font-size: 16px; }
  .cf-submit { align-self: stretch; }
  .cf-chip { flex: 1 1 calc(50% - 4px); }
  .cf-chip span { width: 100%; justify-content: center; text-align: center; padding: 0 10px; }
}

/* ---------- Zones tactiles (07/10/2026) : au moins 44 px au toucher
   (recommandation Apple / WCAG 2.5.5) SANS changer le rendu : la zone est
   agrandie par padding + marge négative (liens, texte) ou par un
   pseudo-élément transparent posé autour (boutons encadrés). */
.foot .foot__legal { display: inline-block; padding: 15px 0; margin: -15px 0; }
.foot .foot__social { padding: 14px; margin: -14px; }
/* Quand les liens passent à la ligne (mobile), écart vertical suffisant pour
   que les zones agrandies (15 + 14 px) ne se chevauchent pas. */
.foot .foot__links { row-gap: 30px; }
.contact__cta { padding: 6px 0; margin: -6px 0; }
#billing-toggle { padding: 14px 0; margin: -2px 0 -14px; }
.legal-modal__close,
.sizes-modal__close,
.cart-item__remove,
.info-tip,
.btn-copy-ref--small,
.checkbox-inline { position: relative; }
/* Case à cocher : toute la ligne répond au toucher (un clic sur le
   pseudo-élément compte comme un clic sur le label, donc coche la case). */
.checkbox-inline::before { content: ''; position: absolute; inset: -7px 0; }
.legal-modal__close::after,
.sizes-modal__close::after { content: ''; position: absolute; inset: -7px; }
.cart-item__remove::after { content: ''; position: absolute; inset: -6px -4px; }
.info-tip::before { content: ''; position: absolute; inset: -14px; }
.btn-copy-ref--small::after { content: ''; position: absolute; inset: -4px 0; }

/* Page devis dans le navigateur d'Instagram / Facebook : le devis suit vers
   Safari / Chrome (panier.js, #panier=… dans l'adresse). */
.cart-iab { margin: 0 0 24px; padding: 14px 16px; border-left: 2px solid var(--ink); background: var(--photo-bg); font-size: 14px; line-height: 1.5; color: var(--ink); }
.cart-iab[hidden] { display: none; }
.cart-iab p { margin: 0; }
.cart-iab__copy { margin-top: 10px; }
.cart-iab .cart-iab__status { margin-top: 6px; font-size: 13px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.cart-iab .cart-iab__status:empty { display: none; }

/* ---------- Pages techniques (/serigraphie-lyon, /impression-dtf-lyon,
   /broderie-lyon) : colonne de lecture, faits clés, étapes, FAQ. */
.tech-page { max-width: 820px; margin: 0 auto; padding: 32px 20px 72px; color: var(--ink); }
.tech-page__crumb { margin: 0 0 24px; font-size: 13px; color: var(--ink-muted); }
.tech-page__crumb a { color: var(--ink-muted); }
.tech-page__kicker { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.tech-page__title { margin: 0; font-size: clamp(38px, 6.4vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.tech-page__lead { margin: 22px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--ink-secondary); }
.tech-facts { display: grid; grid-template-columns: 1fr; margin: 32px 0 0; border-top: 1px solid var(--ink); }
.tech-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.tech-facts dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); padding-top: 2px; }
.tech-facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.tech-block { margin-top: 48px; }
.tech-block h2 { margin: 0 0 18px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.tech-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.tech-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px; background: var(--paper); font-size: 15px; line-height: 1.5; }
.tech-steps b { font-size: 13px; letter-spacing: .06em; color: var(--ink-muted); padding-top: 2px; }
.tech-list { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.tech-list li { margin-bottom: 6px; }
.tech-list--plus { color: var(--ink); }
.tech-pros { display: grid; gap: 32px; }
.tech-pros h2 { font-size: 20px; }
.tech-faq { border-top: 1px solid var(--ink); }
.tech-faq__item { border-bottom: 1px solid var(--border); }
.tech-faq__item summary { cursor: pointer; padding: 16px 0; min-height: 44px; font-size: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.tech-faq__item summary::-webkit-details-marker { display: none; }
.tech-faq__item summary::after { content: '+'; font-weight: 400; font-size: 20px; line-height: 1; }
.tech-faq__item[open] summary::after { content: '−'; }
.tech-faq__item p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); }
.tech-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tech-cta__alt { margin: 0; font-size: 15px; color: var(--ink-secondary); }
.tech-cta__alt a { color: var(--ink); font-weight: 600; }
.tech-others { margin-top: 56px; border-top: 1px solid var(--ink); }
.tech-others__title { margin: 16px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.tech-other { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .tech-other:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 761px) {
  .tech-page { padding: 56px 56px 96px; }
  .tech-facts { grid-template-columns: repeat(3, 1fr); }
  .tech-facts > div { grid-template-columns: 1fr; gap: 6px; padding: 16px 16px 16px 0; }
  .tech-pros { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) { .tech-cta .cart-empty__cta { align-self: stretch; } }

/* ---------- Filtrer et trier (/produits, 09/10/2026) ----------
   Barre "N produits · Filtrer" au-dessus de la grille + panneau (dialog) :
   feuille du bas sur mobile, fenêtre centrée sur ordinateur. Mêmes codes
   que le reste du catalogue : angles droits, filets 1 px, noir quand choisi.
   Créé/activé par catalogue.js (sans JS, la barre reste masquée). */
.list-tools[hidden], .pf-active[hidden], .pf-open__badge[hidden], .pf-empty[hidden] { display: none; }
.list-tools { padding: 20px 20px 0; }
.list-tools:not([hidden]) + .list { padding-top: 20px; }
.list-tools__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-tools__count { margin: 0; font-size: 13px; color: var(--ink-secondary); }
.list-tools__count b { color: var(--ink); font-weight: 700; }
.pf-open {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pf-open svg { flex: none; }
.pf-open.is-active { background: var(--ink); color: var(--paper); }
.pf-open__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.pf-open.is-active .pf-open__badge { background: var(--paper); color: var(--ink); }
.pf-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .pf-open:not(.is-active):hover { background: var(--photo-bg); } }

/* Filtres actifs : un toucher sur une pastille la retire. */
.pf-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 10px 0 12px;
  border: 1px solid var(--border); background: var(--photo-bg); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pf-pill::after { content: '\00d7'; font-size: 17px; font-weight: 400; line-height: 1; }
.pf-pill::before { content: ''; position: absolute; inset: -4px 0; }
.pf-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .pf-pill:hover { border-color: var(--ink); } }

.pf-empty p { margin: 0 0 4px; }
.pf-empty .btn-link { margin-top: 8px; padding: 12px 0; }

/* Panneau */
html.has-pf-sheet { overflow: hidden; }
.pf-sheet {
  border: none; padding: 0; margin: auto;
  width: calc(100% - 32px); max-width: 520px;
  max-height: min(85vh, 760px);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 32px rgba(30, 30, 28, .16);
}
.pf-sheet[open] { display: flex; }
.pf-sheet::backdrop { background: rgba(30, 30, 28, .55); }
.pf-form { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.pf-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.pf-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; margin: 0; }
.pf-close {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border); background: none; color: var(--ink); cursor: pointer;
}
.pf-close::after { content: ''; position: absolute; inset: -7px; }
@media (hover: hover) { .pf-close:hover { background: var(--photo-bg); } }
.pf-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 24px; }
.pf-group { padding: 18px 0; border-bottom: 1px solid var(--border); }
.pf-group:last-child { border-bottom: none; }
/* "Bio / Recyclé" : seconde rangée de la Composition (groupe à part pour le filtre). */
.pf-group:has(+ .pf-group--follow) { border-bottom: none; padding-bottom: 8px; }
.pf-group--follow { padding-top: 0; }
.pf-group__title { margin: 0 0 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { position: relative; display: inline-flex; cursor: pointer; }
.pf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pf-chip span {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink);
  font-size: 14px; line-height: 1.25;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pf-chip b { font-weight: 600; }
.pf-chip small { font-size: 11.5px; color: var(--ink-muted); }
.pf-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pf-chip input:checked + span small { color: rgba(255, 255, 255, .75); }
.pf-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .pf-chip:hover span { border-color: var(--ink); } }
.pf-foot {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-top: 1px solid var(--border); background: var(--paper);
}
.pf-reset {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pf-apply {
  flex: 1; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .pf-apply:hover { background: #2b2b29; } }
.pf-reset:focus-visible, .pf-apply:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Picto "Filtrer" fixe à droite de la barre de catégories collante. */
.filters-bar--with-more { display: flex; align-items: stretch; }
.filters-bar--with-more .filters-bar__track { flex: 1; min-width: 0; }
.filters-bar__more {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; padding: 0;
  border: 0; border-left: 1px solid var(--border);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.filters-bar__more.is-active { background: var(--ink); color: var(--paper); }
.filters-bar__more .pf-open__badge { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.filters-bar__more.is-active .pf-open__badge { background: var(--paper); color: var(--ink); }
.filters-bar__more:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

@media (min-width: 640px) {
  .list-tools { padding: 28px 32px 0; }
}
@media (min-width: 1024px) {
  .list-tools { padding: 32px 56px 0; }
  .list-tools:not([hidden]) + .list { padding-top: 28px; }
}
@media (max-width: 760px) {
  /* Feuille du bas, pleine largeur. */
  .pf-sheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88vh; max-height: 88dvh; }
  .pf-sheet[open] { animation: pf-sheet-up .24s ease; }
  .pf-head { padding: 14px 20px; }
  .pf-body { padding: 0 20px; }
  .pf-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .pf-chip { flex: 1 1 auto; }
  .pf-chip span { width: 100%; }
  .filters-bar--with-more .filters-bar__track { padding-right: 12px; }
}
@keyframes pf-sheet-up { from { transform: translateY(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pf-sheet[open] { animation: none; }
}

/* ---------- Fiche « référence libre » (catalog_is_ref_libre) ----------
   Liste : bandeau pleine largeur, toujours en dernier (hors filtres et tri).
   Fiche : visuel typographique sans photo, note à la place du prix. */
.ref-libre {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.ref-libre__kicker { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.ref-libre__title { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.ref-libre__desc { margin: 10px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.55; color: var(--ink-secondary); }
.ref-libre__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.ref-libre__btn:hover { background: #2b2b29; }
.ref-libre__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 761px) {
  .ref-libre { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 36px 40px; }
  .ref-libre__title { font-size: 26px; }
  .ref-libre__btn { flex: none; }
}

.photo-placeholder--ref { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-transform: none; }
.photo-placeholder--ref span:first-child { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(64px, 14vw, 112px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.photo-placeholder--ref span:last-child { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); }

.pdp__ref-note { margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--border); background: var(--photo-bg); font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }