body.cat { display: flex; flex-direction: column; min-height: 100vh; }
.cat-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--module, var(--ardoise)); color: var(--surface);
}
.cat-titre { font-size: 1.35em; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
.cat-magasin {
  min-height: 48px; padding: 0 18px; border-radius: 24px; border: 2px solid var(--surface);
  background: transparent; color: var(--surface); font: inherit; font-weight: 600; cursor: pointer;
}
.cat-onglets {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 10px 16px 0; background: var(--fond); border-bottom: 2px solid var(--module, var(--bordure));
}
.cat-onglet {
  min-height: 48px; display: flex; align-items: center; padding: 0 22px; font-weight: 600;
  border: 1px solid var(--bordure); border-bottom: none; border-radius: 14px 14px 0 0;
  background: var(--fond-clair); color: var(--gris-fonce);
}
.cat-onglet-actif {
  background: var(--surface); color: var(--module, var(--texte));
  border-color: var(--module, var(--bordure)); box-shadow: 0 -3px 0 var(--module, var(--accent)) inset;
}
.cat-magasin-fixe { cursor: default; border-style: dashed; }
.cat-bandeau { text-align: center; padding: 10px 16px; background: var(--ambre-pale); color: var(--ambre); font-weight: 600; }
.cat-corps { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; padding: 20px 24px 40px; display: grid; gap: 22px; align-content: start; }
.cat-corps h1 { font-size: 1.7em; }
.cat-corps h2 { font-size: 1.25em; margin-bottom: 10px; }
.cat-corps h3 { font-size: 1.05em; margin: 16px 0 8px; }
.cat-pied { text-align: center; padding: 14px; color: var(--gris-fonce); font-size: 0.9em; }
.cat-note { color: var(--gris-fonce); font-size: 0.92em; font-weight: 400; }
.cat-attente, .cat-vide { color: var(--gris-fonce); padding: 20px 0; }
.cat-barre { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cat-bascule { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-cherche { flex: 1 1 260px; }
.cat-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cat-options { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-option {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px;
  border: 2px solid var(--bordure); border-radius: 24px; background: var(--surface);
  color: var(--texte); font: inherit; cursor: pointer;
}
.cat-option.cat-pris { border-color: var(--module, var(--accent)); background: var(--module-pale, var(--accent-pale)); font-weight: 600; }
.cat-options-grandes .cat-option { flex-direction: column; border-radius: 16px; min-width: 112px; padding: 10px 12px; text-align: center; }
.cat-n { font-size: 0.8em; color: var(--orange); }
.cat-tout { display: grid; gap: 14px; }
.cat-filtres-familles { margin-top: 18px; }
.cat-tout h2 { margin-top: 8px; text-align: center; }
.cat-tout .cat-barre, .cat-tout .cat-options, .cat-trouver .cat-barre { justify-content: center; }
.cat-trouver .cat-barre { margin-bottom: 3em; }
.cat-trouver .cat-choix-familles { margin-top: 3em; text-align: center; }
.cat-trouver .cat-choix-familles .cat-options { justify-content: center; }
.cat-trouver .cat-resultats { margin-top: 1.5em; }
.cat-trouver .cat-resultats > h2 { text-align: center; margin-bottom: 8px; }
.cat-sous-titre { text-align: center; margin: 4px 0 8px; }
.cat-tuile-dessin, .cat-option-dessin { width: 44px; height: 44px; object-fit: contain; }
.cat-options-grandes .cat-tuile-dessin { width: 64px; height: 64px; }
.cat-arome { width: 30px; height: 30px; object-fit: contain; display: inline-block; vertical-align: middle; }
img.cat-arome { mix-blend-mode: multiply; }
.cat-arome-grand { width: 64px; height: 64px; }
.cat-arome-vide {
  border-radius: 50%; background: var(--module-pale, var(--fond-clair)); color: var(--module, var(--gris-fonce));
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.cat-gouts { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-gouts-fiche { gap: 10px; }
.cat-gout {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 14px;
  background: var(--fond-clair); font-size: 0.85em;
}
.cat-gout .cat-arome { width: 24px; height: 24px; }
.cat-large-saveurs .cat-gouts { justify-content: center; }
.cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cat-carte {
  position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
  min-height: 48px; padding: 12px; border-radius: 14px; border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font: inherit; cursor: pointer;
}
.cat-photo { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; border-radius: 10px; background: var(--surface); }
.cat-photo-vide { display: flex; align-items: center; justify-content: center; font-size: 2em; }
.cat-badge {
  position: absolute; top: 18px; left: 18px; padding: 2px 10px; border-radius: 12px;
  background: var(--module, var(--accent)); color: var(--surface); font-size: 0.8em; font-weight: 700;
}
.cat-nom { font-weight: 700; font-size: 1.05em; }
.cat-marque { color: var(--gris-fonce); font-size: 0.9em; }
.cat-desc-courte {
  font-size: 0.9em; font-style: italic; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cat-indices { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85em; }
.cat-indice span { color: var(--gris-fonce); }
.cat-decls { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-decl { padding: 2px 8px; border-radius: 10px; background: var(--fond-clair); font-size: 0.85em; }
.cat-rayon { display: block; font-size: 0.9em; color: var(--vert); }
.cat-large .cat-rayon { text-align: center; }
.cat-pour-toi { display: block; text-align: center; font-size: 1em; padding: 10px 12px; border-radius: 12px;
  background: var(--module-pale, var(--fond-clair)); border: 2px solid var(--module, var(--accent)); }
.cat-pour-toi > b:first-child { display: block; color: var(--module, var(--accent)); font-size: 1.1em; margin-bottom: 4px; }
.cat-recette { font-size: 0.92em; }
.cat-solution { cursor: default; }
.cat-plus { justify-self: center; }
.cat-corps [hidden] { display: none !important; }
.cat-titre-page { margin-bottom: 4px; }
.cat-rubrique { display: grid; gap: 6px; justify-items: center; }
.cat-rubrique-titre { text-align: center; font-size: 1.4em; }
.cat-rubrique-compte {
  color: var(--gris-fonce); font-size: 0.88em; padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 2px solid var(--module-pale, var(--bordure)); min-width: 140px; text-align: center;
}
.cat-larges { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; }
.cat-large {
  position: relative; display: flex; flex-direction: column; gap: 12px; width: min(470px, 100%); padding: 16px 18px;
  border: 1px solid var(--bordure); border-top: 4px solid var(--module, var(--accent)); border-radius: 16px;
  background: var(--surface); color: var(--texte); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 6px 18px rgba(44, 62, 80, 0.08);
}
.cat-large:active { transform: scale(0.99); }
.cat-familles { position: absolute; top: 6px; right: 10px; font-size: 0.95em; letter-spacing: 2px; }
.cat-large-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; line-height: 22px; }
.cat-large-badges { display: flex; flex-wrap: nowrap; gap: 4px; white-space: nowrap; min-width: 0; }
.cat-large .cat-familles { position: static; margin-left: auto; white-space: nowrap; letter-spacing: 0; }
.cat-badge-court {
  font-size: 0.8em; font-weight: 600; padding: 2px 7px; border-radius: 10px; line-height: 1.2; text-align: center;
  background: var(--module-pale, var(--fond-clair)); color: var(--module, var(--gris-fonce));
}
.cat-badge-court.cat-badge-neuf { background: var(--module, var(--accent)); color: var(--surface); }
.cat-badge-court.cat-badge-texture { background: var(--surface); border: 1px solid var(--module, var(--accent)); }
.cat-large-nom { text-align: center; font-size: 1.2em; font-weight: 700; letter-spacing: 0.01em; }
.cat-large-milieu { flex: 1; display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; }
.cat-large-photo { width: 130px; height: 130px; object-fit: contain; border-radius: 12px; background: var(--surface); }
.cat-large-fiche { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 0.92em; }
.cat-large-fiche dt { font-weight: 700; }
.cat-large-fiche dd { color: var(--gris-fonce); }
.cat-colonnes { display: flex; flex-wrap: wrap; gap: 0 6px; }
.cat-colonnes span { min-width: 4.6em; }
.cat-large-saveurs {
  display: grid; gap: 6px; justify-items: center; text-align: center; padding-top: 10px;
  border-top: 1px solid var(--bordure); font-size: 0.95em;
}
.cat-voile {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex;
  align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.cat-voile[hidden] { display: none; }
.cat-fiche {
  position: relative; width: min(720px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border-radius: 18px; padding: 24px; display: grid; gap: 10px;
}
.cat-fermer {
  position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border-radius: 24px;
  border: 1px solid var(--bordure); background: var(--surface); font-size: 1.2em; cursor: pointer;
}
.cat-fiche-photo { width: min(280px, 100%); aspect-ratio: 1 / 1; height: auto; object-fit: contain; justify-self: center; }
.cat-description { font-style: italic; }
.cat-dispo-cadre { overflow-x: auto; }
.cat-dispo { border-collapse: collapse; width: 100%; font-size: 0.92em; }
body.cat-fige { overflow: hidden; }
.cat-option.cat-encours { opacity: 0.6; }
.cat-option[disabled] { opacity: 0.45; cursor: not-allowed; border-style: dashed; }
.cat-large:focus-visible, .cat-carte:focus-visible { outline: 3px solid var(--module, var(--accent)); outline-offset: 2px; }
.cat-dispo th, .cat-dispo td { border-bottom: 1px solid var(--bordure); padding: 8px 6px; text-align: center; }
.cat-dispo th:first-child, .cat-dispo td:first-child { text-align: left; }
.cat-dispo .cat-ici { background: var(--module-pale, var(--accent-pale)); font-weight: 700; }
.cat-pause { text-align: center; padding: 60px 20px; display: grid; gap: 14px; justify-items: center; }
.cat-pause-icone { font-size: 3em; }
.cat-choix { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 600px) {
  .cat-corps { padding: 14px 16px 30px; }
  .cat-tete { padding: 8px 16px; }
  .cat-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-large-milieu { grid-template-columns: 1fr; justify-items: center; }
}
.cat-etape { display: grid; gap: 18px; justify-items: center; text-align: center; padding-top: 1em; }
.cat-corps .cat-question { font-size: 1.8em; margin: 0.4em 0 0; }
.cat-reponses { justify-content: center; max-width: 1100px; }
.cat-reponses .cat-option { min-width: 150px; min-height: 120px; justify-content: center; font-size: 1.1em; }
.cat-reponses .cat-tuile-dessin, .cat-reponses .cat-option-dessin { width: 80px; height: 80px; }
.cat-peu-importe { border-style: dashed; font-weight: 600; }
.cat-compte { color: var(--gris-fonce); margin: 0; }
.cat-pas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cat-fil { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cat-puce {
  min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid var(--module, var(--accent));
  background: var(--module-pale, var(--accent-pale)); color: var(--texte); font: inherit; cursor: pointer;
}
.cat-fin { justify-items: stretch; }
.cat-pour-toi .cat-recette { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px;
  background: var(--surface); font-size: 1em; }
.cat-pour-toi .cat-recette b { color: var(--module, var(--accent)); }
.cat-filtre-nicotine { display: grid; gap: 8px; justify-items: center; }
.cat-etape .cat-reponses-filtre .cat-option { min-height: 56px; min-width: 110px; }
.cat-corps .cat-question-bis { font-size: 1.4em; margin-top: 0.6em; }
.cat-etape .cat-pas {
  position: sticky; bottom: 0; width: 100%; padding: 12px 0; z-index: 2;
  background: var(--fond); border-top: 1px solid var(--bordure);
}
.cat-etape .cat-pas:empty { display: none; }
.cat-etape .cat-pas .btn-comptoir { min-height: 56px; padding: 0 28px; font-size: 1.1em; }
.cat-etape .cat-option, .cat-puce, .cat-etape .btn-comptoir {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cat-etape .cat-option:active { transform: scale(0.96); }
.cat-fin > section > h2 { text-align: center; }
.cat-dluo-proche { color: var(--ambre); font-weight: 700; }
.cat-dluo-passee { color: var(--rouge); font-weight: 700; }