/**
 * Catalogue — la page dessinée par Claude Design.
 *
 * Une colonne de filtres qui reste sous les yeux, une grille de cartes, et
 * un tiroir de panier. Le prix est la seule chose qui doit se lire de loin :
 * il porte la seule couleur vive de la carte.
 */

body {
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}
*, *::before, *::after { box-sizing: border-box; }

/* La barre du haut vit dans css/barre.css. Ce qui était ici la redéclarait
   à 60 px de haut avec 20 px de gouttière — la maquette dit 72 et 26. */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-family: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
}
.btn-outline { background: transparent; color: var(--fy-gris, #a5a3bc); border: 1px solid rgba(255, 255, 255, .16); }
.btn-outline:hover { border-color: rgba(139, 123, 255, .5); color: var(--fy-encre, #f2f1f7); }
.btn-primary { background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); }
.btn-primary:hover { background: var(--fy-violet-vif, #a395ff); }

/* La devise et le panier. */
.ca-devise {
  min-height: 44px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: none; color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .8rem; font-weight: 500;
}
.ca-devise:hover { background: rgba(255, 255, 255, .06); }
.ca-panier {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; color: var(--fy-gris, #a5a3bc);
  display: grid; place-items: center;
}
.ca-panier:hover { color: var(--fy-encre, #f2f1f7); background: rgba(255, 255, 255, .06); }
.ca-panier-nb {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .625rem; font-weight: 600; line-height: 17px; text-align: center;
}
.ca-panier-nb[hidden] { display: none; }

/* ── L'en-tête ────────────────────────────────────────────────────────── */
.ca-page { max-width: 1280px; margin: 0 auto; padding: 40px 32px 100px; }

.ca-etiq {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; font-weight: 500; letter-spacing: .16em;
  color: var(--fy-sourd, #6e6c88); margin-bottom: 16px;
}
.ca-titre {
  margin: 0 0 30px; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 3rem; line-height: 1.05; letter-spacing: -.02em;
  max-width: 22ch; text-wrap: balance;
}

/* Les univers, en une bande qui défile plutôt qu'en repli sur deux lignes :
   sept pastilles sur deux rangs cassent le regard. */
.ca-univers {
  display: flex; gap: 8px; margin-bottom: 34px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.ca-univers::-webkit-scrollbar { display: none; }
.ca-univers button {
  flex: none; min-height: 44px; padding: 0 17px; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: var(--fy-corps, #d6d4e4); font-family: inherit; font-size: .875rem; font-weight: 500;
  white-space: nowrap;
}
.ca-univers button:hover { border-color: rgba(255, 255, 255, .3); }
.ca-univers button[aria-pressed="true"] {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee); font-weight: 600;
}
.ca-univers-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .72rem; margin-left: 7px; opacity: .7;
}

/* ── La grille générale ───────────────────────────────────────────────── */
.ca-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 940px) { .ca-grille { grid-template-columns: 1fr; } }

/* ── Les filtres ──────────────────────────────────────────────────────── */
.ca-filtres { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 940px) { .ca-filtres { position: static; } }

.ca-bloc { border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08)); padding-top: 22px; }
.ca-bloc:first-child { border-top: 0; padding-top: 0; }
.ca-bloc-titre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-sourd, #6e6c88); margin-bottom: 14px;
}
.ca-bloc-valeur { font-size: .8rem; color: var(--fy-cyan, #5cd6e8); }

.ca-curseur input { width: 100%; accent-color: var(--fy-violet, #8b7bff); height: 44px; }
.ca-bornes {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; color: var(--fy-sourd, #6e6c88);
}

.ca-puces { display: flex; flex-wrap: wrap; gap: 7px; }
.ca-puce {
  min-height: 44px; padding: 0 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: var(--fy-corps, #d6d4e4); font-family: inherit; font-size: .8125rem;
}
.ca-puce:hover { border-color: rgba(255, 255, 255, .3); }
.ca-puce[aria-pressed="true"] {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee); font-weight: 600;
}

/* Les interrupteurs. */
.ca-bascules { display: flex; flex-direction: column; gap: 6px; }
.ca-bascule {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  border: 0; background: none; cursor: pointer; padding: 0; text-align: left;
  font-family: inherit;
}
.ca-bascule-corps { flex: 1; min-width: 0; }
.ca-bascule-mot { display: block; font-size: .9rem; font-weight: 500; color: var(--fy-encre, #f2f1f7); }
.ca-bascule-sous { display: block; font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; }
.ca-interrupteur {
  flex: none; width: 42px; height: 25px; border-radius: 13px; position: relative;
  background: rgba(255, 255, 255, .14); transition: background .16s ease;
}
.ca-interrupteur::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--fy-sourd, #7e7c99);
  transition: transform .16s ease, background .16s ease;
}
.ca-bascule[aria-pressed="true"] .ca-interrupteur { background: var(--fy-cyan, #5cd6e8); }
.ca-bascule[aria-pressed="true"] .ca-interrupteur::after {
  transform: translateX(17px); background: var(--fy-nuit, #07071a);
}
.ca-bascule[hidden] { display: none; }

.ca-reinitialiser {
  min-height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: .845rem; color: var(--fy-sourd, #6e6c88); text-align: left;
}
.ca-reinitialiser:hover { color: var(--fy-encre, #f2f1f7); }

/* ── Le bandeau des directs ───────────────────────────────────────────── */
.ca-directs {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 28px; padding: 20px; border-radius: 18px;
  text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(240, 180, 92, .11), rgba(255, 107, 107, .05));
  border: 1px solid rgba(240, 180, 92, .3);
}
.ca-directs[hidden] { display: none; }
.ca-directs-vignette {
  width: 110px; height: 74px; flex: none; border-radius: 11px; position: relative;
  background: repeating-linear-gradient(160deg, #0f0f28 0 10px, #191940 10px 20px);
}
.ca-directs-corps { flex: 1; min-width: 200px; }
.ca-directs-quand {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .1em; color: var(--fy-ambre, #f0b45c);
}
.ca-point-vif {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--fy-ambre, #f0b45c);
  animation: ca-pouls 1.6s ease-in-out infinite;
}
@keyframes ca-pouls { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .ca-point-vif { animation: none } }
.ca-directs-nom { font-size: 1rem; font-weight: 600; }
.ca-directs-sous { font-size: .845rem; color: var(--fy-gris, #a5a3bc); margin-top: 4px; }
.ca-directs-action {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: 10px;
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--fy-ambre, #f0b45c); color: var(--fy-nuit, #07071a);
  font-size: .875rem; font-weight: 600; text-decoration: none;
}

/* ── L'en-tête de liste et le tri ─────────────────────────────────────── */
.ca-entete { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ca-resultat {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; letter-spacing: .1em; color: var(--fy-sourd, #6e6c88);
}
.ca-tri {
  margin-left: auto; display: flex; align-items: center; gap: 3px; padding: 3px;
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
}
.ca-tri button {
  /* 44 px comme partout : un tri qu'on rate renvoie une liste qu'on n'a pas
     demandée, et l'on ne comprend pas pourquoi elle a bougé. */
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 100px; cursor: pointer;
  background: transparent; color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .8125rem; font-weight: 500;
}
.ca-tri button[aria-pressed="true"] { background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a); }

/* ── Les cartes ───────────────────────────────────────────────────────── */
.ca-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1100px) { .ca-cartes { grid-template-columns: repeat(2, 1fr); } }

/* Le repli téléphone (maquette « Frenchy App » — l'image d'abord). Deux
   colonnes bord à bord : 3 px de gouttière, aucune marge extérieure. La
   grille annule le padding latéral de .ca-page pour toucher les deux bords
   — c'est 20 % de surface d'image gagnée sur du vide. Les hauteurs alternent
   3/4 (colonne de gauche) et 1/1 (droite) : les lignes ne s'alignent jamais
   d'une colonne à l'autre, rien ne coupe l'écran en travers, et le pouce
   continue. */
@media (max-width: 560px) {
  .ca-cartes {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    /* -20px annule exactement le padding latéral de .ca-page sous 760 px. */
    margin-left: -20px;
    margin-right: -20px;
  }
  .ca-carte { border-radius: 12px; }
}

.ca-carte {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
}
.ca-carte:hover { border-color: rgba(255, 255, 255, .2); }
/* Le média porte le lien ET le cœur. Le cœur ne peut pas vivre DANS le lien
   — un bouton dans un lien n'est pas du HTML valide, et le clic sur l'un
   déclencherait l'autre. */
.ca-media { position: relative; }
.ca-image {
  height: 230px; display: block; text-decoration: none;
  background: repeating-linear-gradient(135deg, var(--fy-surface, #14142e) 0 10px, #191940 10px 20px);
}
.ca-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-fanion {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .594rem; font-weight: 500; letter-spacing: .1em;
  border-radius: 100px; padding: 5px 10px;
}
.ca-fanion-unique  { background: var(--fy-ambre, #f0b45c); color: var(--fy-nuit, #07071a); }
.ca-fanion-direct  { background: rgba(255, 107, 107, .9); color: #fff; }
.ca-fanion-commande{ background: rgba(7, 7, 26, .7); color: var(--fy-corps, #d6d4e4); }
.ca-fanion-stock   { background: rgba(7, 7, 26, .7); color: var(--fy-corps, #d6d4e4); }

.ca-coeur {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(7, 7, 26, .65); color: var(--fy-corps, #d6d4e4);
}
.ca-coeur:hover { background: rgba(7, 7, 26, .85); }
.ca-coeur[hidden] { display: none; }
.ca-coeur[aria-pressed="true"] { color: #ff6b6b; }
.ca-coeur[aria-pressed="true"] svg { fill: #ff6b6b; }

.ca-corps { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.ca-atelier { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ca-atelier-rond {
  width: 26px; height: 26px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--fy-surface, #14142e); display: grid; place-items: center;
  font-size: .69rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.ca-atelier-rond img { width: 100%; height: 100%; object-fit: cover; }
.ca-atelier-nom {
  font-size: .8125rem; color: var(--fy-gris, #a5a3bc); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* La marge négative compense le rembourrage : la zone touchable atteint la
     hauteur de la vignette voisine sans que la ligne bouge d'un pixel. Un
     nom d'atelier reste un lien de texte, il ne peut pas faire 44 px sans
     défaire la carte — mais 16 px se ratent. */
  padding: 5px 0; margin: -5px 0;
}
.ca-atelier-nom:hover { color: var(--fy-encre, #f2f1f7); }
.ca-atelier-pays {
  margin-left: auto; flex: none;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; color: var(--fy-sourd, #6e6c88);
}
.ca-nom {
  font-size: .97rem; font-weight: 600; line-height: 1.35;
  color: inherit; text-decoration: none;
}
.ca-nom:hover { color: var(--fy-violet, #8b7bff); }
.ca-detail {
  font-size: .8125rem; color: var(--fy-sourd, #6e6c88); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ca-prix-ligne { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ca-prix {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.125rem; font-weight: 500; color: var(--fy-cyan, #5cd6e8);
  font-variant-numeric: tabular-nums;
}
/* La conversion est indicative : elle ne peut pas se lire aussi fort que le
   montant réellement débité. */
.ca-prix-converti {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .78rem; color: var(--fy-sourd, #6e6c88);
}
.ca-livraison { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 6px; }
.ca-ajouter {
  margin-top: 16px; min-height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: .875rem; font-weight: 600;
}
.ca-ajouter:hover { background: var(--fy-violet-vif, #a395ff); }
.ca-ajouter.ca-dedans { background: rgba(255, 255, 255, .08); color: var(--fy-gris, #a5a3bc); }

.ca-vide {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px;
  color: var(--fy-sourd, #6e6c88); font-size: .9375rem; line-height: 1.6;
}

/* ── Ce que le site tient vraiment ────────────────────────────────────── */
.ca-garanties {
  margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; overflow: hidden;
}
@media (max-width: 900px) { .ca-garanties { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ca-garanties { grid-template-columns: 1fr; } }
.ca-garantie { background: var(--fy-carte, #0c0c24); padding: 22px; }
.ca-garantie-titre { font-size: .9rem; font-weight: 600; }
.ca-garantie p { margin: 7px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }

/* ── Le tiroir du panier ──────────────────────────────────────────────── */
.ca-voile {
  position: fixed; inset: 0; z-index: 300; background: rgba(4, 4, 14, .7);
  display: flex; justify-content: flex-end;
}
.ca-voile[hidden] { display: none; }
.ca-tiroir {
  width: 420px; max-width: 100%; height: 100%; overflow-y: auto; padding: 28px;
  background: var(--fy-carte, #0c0c24); border-left: 1px solid rgba(255, 255, 255, .12);
}
.ca-tiroir-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ca-tiroir-titre {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 1.875rem;
}
.ca-x {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--fy-encre, #f2f1f7);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.ca-x:hover { background: rgba(255, 255, 255, .16); }
.ca-lignes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.ca-ligne { display: flex; align-items: center; gap: 12px; }
.ca-ligne-image {
  width: 52px; height: 52px; flex: none; border-radius: 11px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #191940 0 6px, #212148 6px 12px);
}
.ca-ligne-image img { width: 100%; height: 100%; object-fit: cover; }
.ca-ligne-corps { flex: 1; min-width: 0; }
.ca-ligne-nom { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-ligne-atelier { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; }
.ca-ligne-prix {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .845rem; font-weight: 500; flex: none;
}
.ca-ligne-retirer {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--fy-sourd, #6e6c88); display: grid; place-items: center;
}
.ca-ligne-retirer:hover { color: #ff8f8f; background: rgba(255, 143, 143, .1); }
.ca-note-tiroir {
  margin: 0 0 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .845rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc);
}
.ca-total {
  display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ca-total-mot { font-size: 1rem; font-weight: 600; }
.ca-total-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.ca-payer {
  width: 100%; min-height: 52px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ca-payer:hover { background: var(--fy-violet-vif, #a395ff); }

/* ── Le message ───────────────────────────────────────────────────────── */
.ca-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 400;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-radius: 13px; padding: 15px 20px; font-size: .9375rem; font-weight: 500;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.ca-toast[hidden] { display: none; }
.ca-carre { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--fy-violet, #8b7bff); }

@media (max-width: 760px) {
  .ca-page { padding-left: 20px; padding-right: 20px; }
  .ca-titre { font-size: 2rem; }
  .ca-tri { margin-left: 0; width: 100%; overflow-x: auto; }
}

/* Les hauteurs alternées du repli téléphone. Placé EN FIN de fichier, après
   la règle de base `.ca-image { height: 230px }` : à spécificité égale, c'est
   l'ordre de source qui tranche, et l'override doit venir après. Colonne de
   gauche en 3/4, colonne de droite en 1/1 — les lignes ne s'alignent jamais. */
@media (max-width: 560px) {
  .ca-image { height: auto; aspect-ratio: 1 / 1; }
  .ca-carte:nth-child(odd) .ca-image { aspect-ratio: 3 / 4; }
}