/* ═══════════════════════════════════════════════════════════════════════════
   catalogue.css — Le catalogue public                         (2026-10-18)
   ───────────────────────────────────────────────────────────────────────────
   Servi par /catalogue.php via asset_src(), JAMAIS en dur : c'est la leçon
   payée trois fois (admin.css, crm.css, nova.css).

   Thème CLAIR uniquement, comme les pages de vente : c'est une vitrine, elle
   doit ressembler à la même chose chez tous les visiteurs.

   LES COULEURS DE MARQUE arrivent en propriétés personnalisées sur <html>,
   calculées par catalog_view_model() à partir de la couleur de /app :
     --cat-brand       la couleur choisie, pour les aplats et le décor
     --cat-brand-ink   la même, ramenée à 4,5:1 sur blanc — pour du TEXTE, et
                       pour les aplats qui en portent (blanc dessus)
     --cat-brand-soft / -tint / -mark   mélanges avec du blanc (fonds)
   ⚠️ Ne jamais écrire du texte en --cat-brand : un jaune pâle choisi par un
   admin tomberait à 1,4:1. C'est --cat-brand-ink qui est mesurée.

   ⚠️ Et pour un APLAT qui porte du texte (bouton, filtre actif), c'est encore
   --cat-brand-ink, avec du blanc dessus — pas --cat-brand avec « la meilleure
   des deux encres » : pour une teinte moyenne, cette meilleure encre plafonne
   à 4,1:1, trop peu pour du 14 px. --cat-brand-ink tient 4,5:1 face au blanc
   PAR CONSTRUCTION (branding_link_on_light), donc l'inverse aussi.

   Les valeurs ci-dessous ne sont que le DERNIER FILET (violet d'origine) :
   elles ne servent que si le style en ligne manque.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --cat-brand:      #6c5ce7;
    --cat-brand-ink:  #6c5ce7;
    --cat-on-ink:     #ffffff;
    --cat-brand-soft: #f5f4fd;
    --cat-brand-tint: #e7e5fb;
    --cat-brand-mark: #aea5f2;

    --cat-bg:       #fbfafc;
    --cat-surface:  #ffffff;
    --cat-ink:      #17151f;
    --cat-text:     #45424f;
    --cat-muted:    #696675;
    --cat-line:     #ebe8f0;
    --cat-free-ink: #0f6e43;

    --cat-preview-a:    #fff4d1;
    --cat-preview-b:    #ffeaa8;
    --cat-preview-ink:  #4d3800;
    --cat-preview-line: #ecc75a;

    --cat-shadow:       0 1px 2px rgba(23, 21, 31, .04), 0 4px 14px -4px rgba(23, 21, 31, .07);
    --cat-shadow-hover: 0 2px 6px rgba(23, 21, 31, .05), 0 22px 44px -14px rgba(23, 21, 31, .22);

    --cat-radius:    22px;
    --cat-radius-sm: 14px;
    --cat-gutter:    16px;

    --cat-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Pile système, comme --nova-font-display : une @font-face de plus, c'est
       un titre de 60 px qui change de lettre après le premier rendu. */
    --cat-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                        "Charter", "Bitstream Charter", Georgia,
                        "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.cat-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--cat-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cat-text);
    /* Le halo de marque en haut de page — la seule couleur de fond qui ne
       vient pas d'une carte. Il s'éteint dans le fond neutre.
       ⚠️ En --cat-brand-SOFT (7 %), pas en -tint (16 %) : le texte discret
       du héros passe dessus, et pour une marque sombre une teinte à 16 %
       le faisait tomber à 3,9:1. Mesuré sur 300 couleurs par
       tools/test-catalog.php. */
    background:
        radial-gradient(ellipse 90% 520px at 50% -120px, var(--cat-brand-soft), transparent 72%),
        var(--cat-bg);
    -webkit-font-smoothing: antialiased;
}

body.cat-body > main { flex: 1 0 auto; }

a { color: var(--cat-brand-ink); }

/* ---------------------------------------------------------------------------
   Bandeau d'aperçu — volontairement étranger à la page
   --------------------------------------------------------------------------- */
.cat-preview {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px var(--cat-gutter);
    text-align: center;
    font: 600 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--cat-preview-ink);
    background: repeating-linear-gradient(-45deg,
        var(--cat-preview-a) 0 12px, var(--cat-preview-b) 12px 24px);
    border-bottom: 1px solid var(--cat-preview-line);
}
.cat-preview a { color: var(--cat-preview-ink); margin-left: 10px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   En-tête
   --------------------------------------------------------------------------- */
.cat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 18px var(--cat-gutter);
}

.cat-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: var(--cat-ink);
}
.cat-brand__logo { display: block; max-height: 38px; max-width: 180px; width: auto; height: auto; }
.cat-brand__dot {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cat-brand);
    box-shadow: 0 0 0 4px var(--cat-brand-tint);
}
.cat-brand__name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-top__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--cat-line);
    background: var(--cat-surface);
    color: var(--cat-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cat-top__link svg { color: var(--cat-brand-ink); }
@media (hover: hover) {
    .cat-top__link:hover { border-color: var(--cat-brand-mark); box-shadow: var(--cat-shadow); }
}

/* ---------------------------------------------------------------------------
   Héros
   --------------------------------------------------------------------------- */
.cat-hero {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px var(--cat-gutter) 36px;
    text-align: center;
    animation: cat-in .7s cubic-bezier(.2, .7, .2, 1) backwards;
}

.cat-title {
    margin: 0;
    font-family: var(--cat-font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--cat-ink);
    text-wrap: balance;
}

/* Le dernier mot du titre, souligné d'un trait de pinceau. La forme vient
   d'un SVG en MASQUE et la couleur de --cat-brand : un SVG en image de fond
   ne peut pas lire une propriété personnalisée, et chaque marque aurait
   demandé son propre fichier. Sans support du masque, il reste un trait
   plein — moins joli, toujours juste. */
.cat-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.cat-mark::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -.06em;
    height: .2em;
    background: var(--cat-brand);
    opacity: .85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C40 3.5 92 1.5 198 5.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C40 3.5 92 1.5 198 5.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cat-intro {
    max-width: 620px;
    margin: 22px auto 0;
    font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem);
    line-height: 1.6;
    color: var(--cat-text);
    text-wrap: pretty;
}

.cat-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin: 22px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-muted);
}
.cat-proof__sep { color: var(--cat-brand-mark); }

/* ---------------------------------------------------------------------------
   Recherche et filtres
   --------------------------------------------------------------------------- */
.cat-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 0 var(--cat-gutter);
}
.cat-tools[hidden] { display: none; }

.cat-search {
    position: relative;
    flex: 1 1 300px;
    max-width: 440px;
}
.cat-search svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cat-muted);
    pointer-events: none;
}
.cat-search input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-ink);
    /* ⚠️ 16 px minimum : en dessous, Safari iOS zoome à la mise au point. */
    font: inherit;
    font-size: 16px;
    box-shadow: var(--cat-shadow);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.cat-search input::placeholder { color: var(--cat-muted); }
.cat-search input:focus {
    outline: none;
    border-color: var(--cat-brand-ink);
    box-shadow: 0 0 0 4px var(--cat-brand-tint);
}

.cat-chips {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--cat-line);
    background: var(--cat-surface);
}
.cat-chip {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cat-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.cat-chip.is-on { background: var(--cat-brand-ink); color: var(--cat-on-ink); }
.cat-chip:focus-visible { outline: 3px solid var(--cat-brand-mark); outline-offset: 2px; }

.cat-count {
    flex-basis: 100%;
    text-align: center;
    font-size: 13px;
    color: var(--cat-muted);
    font-variant-numeric: tabular-nums;
}
.cat-count:empty { display: none; }

/* ---------------------------------------------------------------------------
   La grille et les cartes
   --------------------------------------------------------------------------- */
.cat-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--cat-gutter) 72px;
}

.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-radius);
    background: var(--cat-surface);
    box-shadow: var(--cat-shadow);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease;
    animation: cat-in .6s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
/* Une carte écartée par le filtre doit quitter la GRILLE, pas seulement la
   vue — sinon elle garde sa cellule et laisse un trou. */
.cat-card[hidden] { display: none; }

.cat-card__media {
    position: relative;
    aspect-ratio: 16 / 9;   /* le format des couvertures de /app */
    overflow: hidden;
    border-radius: var(--cat-radius-sm);
    background: linear-gradient(135deg, var(--cat-brand-tint), var(--cat-brand-soft));
}
.cat-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.cat-card__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--cat-font-display);
    font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
    letter-spacing: .02em;
    color: var(--cat-brand-ink);
}

.cat-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}
/* Fond blanc et texte --cat-brand-ink : la seule paire dont le contraste est
   GARANTI quelle que soit la couleur de marque. Un aplat de marque ne tient
   que 4,1:1 au pire, trop peu pour 12 px. */
.cat-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-brand-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(23, 21, 31, .12);
}
.cat-badge--free { color: var(--cat-free-ink); }

.cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 10px 16px;
    flex: 1 1 auto;
}

.cat-card__title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--cat-ink);
    text-wrap: balance;
}
.cat-card__link { color: inherit; text-decoration: none; }
/* Le lien couvre toute la carte. */
.cat-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--cat-radius);
}
.cat-card__link:focus { outline: none; }
.cat-card__link:focus-visible::after {
    outline: 3px solid var(--cat-brand-ink);
    outline-offset: 3px;
}

.cat-card__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--cat-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 10px;
    padding: 14px 0 6px;
    border-top: 1px solid var(--cat-line);
}

.cat-price { margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cat-price strong {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--cat-ink);
    font-variant-numeric: tabular-nums;
}
.cat-price small { font-size: 13px; color: var(--cat-muted); }

.cat-card__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-brand-ink);
}
.cat-card__cta svg { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }

/* « Présentation » au-dessus de « Commander », à égalité de poids. Liens posés
   au-dessus du lien étiré de la carte (même principe que .cat-rating). */
.cat-card__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.cat-card__cta--link {
    position: relative;
    z-index: 2;
    padding: 2px 0;
    text-decoration: none;
}
.cat-card__cta--link:focus-visible {
    outline: 3px solid var(--cat-brand-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Survol enfermé dans (hover: hover) : sur écran tactile, :hover reste collé
   après le doigt et la carte resterait soulevée. */
@media (hover: hover) {
    .cat-card:hover {
        transform: translateY(-4px);
        border-color: var(--cat-brand-tint);
        box-shadow: var(--cat-shadow-hover);
    }
    .cat-card:hover .cat-card__media img { transform: scale(1.04); }
    /* Deux liens : la flèche ne bouge que sur celui qu'on survole. */
    .cat-card:hover .cat-card__cta:not(.cat-card__cta--link) svg,
    .cat-card__cta--link:hover svg { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------------
   Les rayons et les livres électroniques (2026-11-01)
   Deux rayons : chacun son titre, le second sur une bande teintée. Un livre
   n'est pas une vidéo : couverture verticale, à gauche, avec son dos et son
   ombre. Sans image, la couverture est composée (titre sur aplat de marque,
   la paire --cat-on-ink / --cat-brand-ink, mesurée à 4,5:1).
   --------------------------------------------------------------------------- */
.cat-section[hidden] { display: none; }
.cat-section__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto 22px;
    padding: 0 var(--cat-gutter);
}
.cat-section__title {
    margin: 0;
    font-family: var(--cat-font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--cat-ink);
}
.cat-section--band {
    padding-top: 48px;
    background: var(--cat-brand-soft);
    border-top: 1px solid var(--cat-brand-tint);
}

.cat-grid--books { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.cat-card--book {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 20px;
    padding: 18px;
}
.cat-card--book .cat-card__media {
    grid-row: 1 / 3;
    align-self: start;
    aspect-ratio: 3 / 4;
    border-radius: 3px 9px 9px 3px;
    box-shadow:
        0 1px 2px rgba(23, 21, 31, .12),
        6px 10px 20px -8px rgba(23, 21, 31, .38);
    transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease;
}
/* Le dos du livre : une ombre le long de la reliure, posée sur l'image. */
.cat-card--book .cat-card__media::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .03) 62%, rgba(255, 255, 255, .22));
    pointer-events: none;
}
.cat-card--book .cat-card__body { padding: 2px 0 14px; }
.cat-card--book .cat-card__foot { margin: 0; padding: 12px 0 0; }
.cat-card--book .cat-card__badges { left: 16px; top: 8px; right: 6px; flex-wrap: wrap; }
.cat-card--book .cat-badge { padding: 3px 8px; font-size: 11px; }
.cat-card__booktitle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 34px 10px 14px 22px;
    background: var(--cat-brand-ink);
    color: var(--cat-on-ink);
    font-family: var(--cat-font-display);
    font-size: .96rem;
    line-height: 1.22;
    overflow: hidden;
    /* Césure à la française plutôt qu'un mot coupé au hasard (<html lang>). */
    hyphens: auto;
    overflow-wrap: break-word;
}
@media (hover: hover) {
    .cat-card--book:hover .cat-card__media {
        transform: translateY(-3px) rotate(-1.4deg);
        box-shadow:
            0 2px 4px rgba(23, 21, 31, .14),
            10px 16px 28px -8px rgba(23, 21, 31, .42);
    }
    .cat-card--book:hover .cat-card__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cat-card--book .cat-card__media { transition: none; }
}
@media (max-width: 520px) {
    .cat-card--book { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
    .cat-card--book .cat-card__media { grid-row: 1; }
    .cat-card--book .cat-card__foot { grid-column: 1 / -1; margin-top: 4px; }
    .cat-card__booktitle { padding: 26px 8px 10px 18px; font-size: .86rem; }
    .cat-card--book .cat-card__badges { left: 14px; top: 6px; }
}

/* ---------------------------------------------------------------------------
   États : aucune correspondance, catalogue vide, introuvable
   --------------------------------------------------------------------------- */
.cat-nomatch, .cat-empty {
    max-width: 520px;
    margin: 0 auto 80px;
    padding: 0 var(--cat-gutter);
    text-align: center;
    color: var(--cat-muted);
}
.cat-nomatch[hidden] { display: none; }
.cat-empty h2 {
    margin: 12px 0 8px;
    font-family: var(--cat-font-display);
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--cat-ink);
}

.cat-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--cat-brand-ink);
    color: var(--cat-on-ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.cat-button--ghost {
    background: var(--cat-surface);
    color: var(--cat-ink);
    border: 1px solid var(--cat-line);
}

.cat-missing {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 80px var(--cat-gutter);
    text-align: center;
}
.cat-missing__code {
    margin: 0;
    font-family: var(--cat-font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--cat-brand-mark);
}
.cat-missing__title {
    margin: 8px 0 0;
    font-family: var(--cat-font-display);
    font-weight: 500;
    font-size: 2rem;
    color: var(--cat-ink);
}
.cat-missing__body { margin: 0 0 20px; color: var(--cat-muted); }

/* ---------------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------------- */
.cat-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    padding: 26px var(--cat-gutter) 34px;
    border-top: 1px solid var(--cat-line);
    font-size: 13px;
    color: var(--cat-muted);
}
.cat-foot a { color: var(--cat-muted); text-decoration: none; }
.cat-foot a:hover { color: var(--cat-ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Mouvement
   --------------------------------------------------------------------------- */
@keyframes cat-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-hero, .cat-card { animation: none; }
    .cat-card, .cat-card__media img, .cat-card__cta svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   Avis (2026-10-29, migration 041)
   La note d'une carte n'apparaît que si la moyenne dépasse 4 avec au moins
   3 avis (reviews_public_visible). Un clic ouvre le panneau : <dialog>
   natif, à droite sur grand écran, en feuille montante sur téléphone.
   --------------------------------------------------------------------------- */
:root {
    --cat-star:     #e8930c;   /* orangé foncé : 2,6:1 sur blanc, décor seulement */
    --cat-star-off: #e2dfe8;
}

/* Étoiles « au demi près » : deux couches de ★, la seconde rognée.
   --stars est un PARAMÈTRE d'instance (0 à 5), posé par le gabarit. */
.cat-stars {
    --stars: 0;
    position: relative;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--cat-star-off);
    white-space: nowrap;
}
.cat-stars::before { content: "★★★★★"; }
.cat-stars::after {
    content: "★★★★★";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--stars) / 5 * 100%);
    overflow: hidden;
    color: var(--cat-star);
}
.cat-stars--lg { font-size: 22px; letter-spacing: 2px; }

.cat-rating {
    position: relative;
    z-index: 2;           /* au-dessus du lien étiré de la carte */
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 0 -6px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cat-ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
}
.cat-rating strong { font-weight: 700; }
.cat-rating__count {
    color: var(--cat-muted);
    text-decoration: underline;
    text-decoration-color: var(--cat-line);
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .cat-rating:hover { background: var(--cat-brand-soft); }
    .cat-rating:hover .cat-rating__count { color: var(--cat-brand-ink); text-decoration-color: currentColor; }
}
.cat-rating:focus-visible { outline: 3px solid var(--cat-brand-ink); outline-offset: 2px; }

html.has-dialog { overflow: hidden; }

/* --- Le panneau ------------------------------------------------------------ */
.cat-reviews {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(480px, 100vw);
    max-width: 100vw;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cat-text);
    overflow: visible;
}
.cat-reviews::backdrop {
    background: rgba(23, 21, 31, .42);
    backdrop-filter: blur(2px);
}
.cat-reviews[open] { animation: cat-slide-in .28s cubic-bezier(.2, .7, .2, 1); }
.cat-reviews[open]::backdrop { animation: cat-fade .28s ease; }
@keyframes cat-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cat-fade { from { opacity: 0; } to { opacity: 1; } }

.cat-reviews__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cat-surface);
    box-shadow: -20px 0 60px -20px rgba(23, 21, 31, .35);
}
.cat-reviews__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--cat-line);
}
.cat-reviews__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cat-muted);
}
.cat-reviews__title {
    margin: 2px 0 0;
    font-family: var(--cat-font-display);
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--cat-ink);
    overflow-wrap: anywhere;
}
.cat-reviews__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cat-line);
    border-radius: 50%;
    background: var(--cat-surface);
    color: var(--cat-ink);
    cursor: pointer;
}
@media (hover: hover) {
    .cat-reviews__close:hover { background: var(--cat-brand-soft); }
}
.cat-reviews__close:focus-visible { outline: 3px solid var(--cat-brand-ink); outline-offset: 2px; }

.cat-reviews__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
}
.cat-reviews__body[aria-busy="true"] .cat-reviews__list { opacity: .55; }

.cat-reviews__summary {
    display: grid;
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: var(--cat-radius-sm);
    background: var(--cat-brand-soft);
}
.cat-reviews__score { display: flex; align-items: center; gap: 14px; }
.cat-reviews__score > strong {
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 800;
    color: var(--cat-ink);
    font-variant-numeric: tabular-nums;
}
.cat-reviews__count { display: block; margin-top: 4px; font-size: 13px; color: var(--cat-muted); }

.cat-reviews__dist { display: grid; gap: 3px; }
.cat-dist {
    display: grid;
    grid-template-columns: 36px 1fr 32px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cat-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.cat-dist:disabled { cursor: default; opacity: .55; }
@media (hover: hover) {
    .cat-dist:not(:disabled):hover { background: var(--cat-surface); }
}
.cat-dist.is-on { background: var(--cat-surface); box-shadow: inset 0 0 0 1.5px var(--cat-brand-ink); }
.cat-dist:focus-visible { outline: 2px solid var(--cat-brand-ink); outline-offset: 1px; }
.cat-dist__n { font-weight: 600; white-space: nowrap; }
.cat-dist__bar {
    height: 8px;
    border-radius: 99px;
    background: var(--cat-surface);
    overflow: hidden;
}
.cat-dist__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cat-star);
}
.cat-dist__c { text-align: right; color: var(--cat-muted); font-variant-numeric: tabular-nums; }
.cat-dist-all {
    justify-self: start;
    margin-top: 4px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--cat-brand-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cat-reviews__status { margin: 0; font-size: 14px; color: var(--cat-muted); }
.cat-reviews__status:empty { display: none; }

.cat-reviews__list { list-style: none; margin: 0; padding: 0; transition: opacity .15s ease; }
.cat-review { padding: 16px 0; border-bottom: 1px solid var(--cat-line); }
.cat-review:first-child { padding-top: 4px; }
.cat-review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-review__name { font-size: 15px; color: var(--cat-ink); }
.cat-review__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--cat-muted); }
.cat-review__badge { font-weight: 600; color: var(--cat-free-ink); }
.cat-review__badge::before { content: "✓ "; }
.cat-review__text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cat-text);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cat-reviews__more { display: flex; margin: 18px auto 0; }
.cat-reviews__more[hidden] { display: none; }

.cat-reviews__how {
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-radius-sm);
    font-size: 13px;
    color: var(--cat-muted);
}
.cat-reviews__how summary { cursor: pointer; font-weight: 600; color: var(--cat-text); }
.cat-reviews__how p { margin: 8px 0 0; line-height: 1.55; }

/* Téléphone : feuille qui monte du bas, poignée, 88 % de la hauteur. */
@media (max-width: 640px) {
    .cat-reviews {
        inset: auto 0 0 0;
        width: 100vw;
        height: 88vh;
        height: 88dvh;
    }
    .cat-reviews[open] { animation-name: cat-sheet-in; }
    @keyframes cat-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .cat-reviews__panel {
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -20px 60px -20px rgba(23, 21, 31, .35);
    }
    .cat-reviews__head { position: relative; padding: 24px 16px 12px; }
    .cat-reviews__head::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 99px;
        background: var(--cat-line);
    }
    .cat-reviews__body { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-reviews[open], .cat-reviews[open]::backdrop { animation: none; }
}

/* ---------------------------------------------------------------------------
   Grands écrans et téléphones
   --------------------------------------------------------------------------- */
@media (min-width: 720px) {
    :root { --cat-gutter: 28px; }
    .cat-hero { padding-top: 64px; padding-bottom: 48px; }
}

@media (max-width: 520px) {
    .cat-top { padding-top: 14px; padding-bottom: 14px; }
    .cat-top__link { padding: 8px 12px; font-size: 13px; }
    .cat-hero { padding-top: 32px; }
    .cat-grid { gap: 20px; }
    .cat-card { padding: 10px; }
}