/*
 * « Découvrir les boutiques » — l'annuaire, une boutique, un article.
 *
 * Servie telle quelle, sans passer par Vite : le déploiement n'exécute pas
 * `npm run build`, et une page dépendante d'un build absent s'afficherait nue.
 * Même règle que `site.css`, dont cette feuille prend la suite.
 *
 * Rien ici ne redéfinit une couleur, une police ni un rayon : tout vient des
 * variables de `site.css` — le vert, l'or et le rouge du drapeau, la police
 * système, `--radius`, `--line`. Les boutons, les puces et les encarts sont ses
 * classes (`.btn`, `.card`, `.eyebrow`, `.lead`). Cette feuille n'ajoute que ce
 * que le site n'avait pas : la grille de l'annuaire, ses lignes, sa colonne de
 * filtres et la fiche d'un article.
 *
 * Une seconde palette avait été essayée pour ces pages, reprise de
 * l'application ; deux identités sur un même domaine se voyaient. Le visiteur
 * qui arrive par un lien de partage doit reconnaître le même site que celui des
 * pages de présentation.
 */

/*
 * Ces pages restent claires, y compris quand le système est en thème sombre.
 *
 * `site.css` bascule alors son fond sur un vert presque noir (#0b1310), qui va
 * aux pages de présentation — du texte sur des aplats — mais pas à un
 * catalogue : une photo d'article sur un fond teinté sort fausse, et vingt-
 * quatre vignettes vert sombre se lisaient comme un tableau de bord plutôt
 * qu'une devanture. Un fond clair est ce sur quoi une marchandise se regarde.
 *
 * Les variables claires de `site.css` sont donc reprises telles quelles, hors
 * requête de média : cette feuille étant chargée après elle, et sur ces trois
 * pages seulement, elles l'emportent sans toucher au reste du site. Le vert,
 * l'or et le rouge du drapeau ne changent pas — l'identité est la même, c'est
 * le thème sombre seul qui est écarté.
 *
 * `color-scheme: light` avec : sans lui, le navigateur peint encore les champs
 * de saisie et les menus déroulants en sombre, et le texte tapé dans la
 * recherche ressortait blanc sur blanc.
 */
:root:has(.catalog) {
    color-scheme: light;

    --ink: #12211a;
    --ink-soft: #4b5b52;
    --line: #dfe8e1;
    --surface: #ffffff;
    --bg: #f8fbf8;
    --green-wash: #f2f9f3;
}

/* Portées par la racine et non par `.catalog` : la barre et le pied de page
   sont dehors, et les laisser sombres autour d'un catalogue clair faisait un
   sandwich. Un navigateur sans `:has()` garde le thème sombre — la page reste
   lisible, elle n'est pas cassée. */
:root:has(.catalog) body {
    color: var(--ink);
    background: var(--bg);
}

/* Toute la largeur, là où les pages de présentation tiennent dans 1120 px.
   Un texte qu'on lit gagne à rester en colonne étroite ; une devanture, non —
   sur un écran de bureau, la moitié de la place partait en marges pendant que
   les boutiques s'empilaient sur deux colonnes.
   La barre et le pied de page suivent, sans quoi le logo restait au centre
   quand le catalogue touchait les bords.
   Le retrait latéral ne descend pas à zéro : collé au bord de l'écran, le
   premier nom devient pénible à lire, et rien ne dit plus où la page commence.
   Il grandit un peu avec la fenêtre, sans jamais dépasser 40 px. */
:root:has(.catalog) .wrap {
    max-width: none;
    padding: 0 clamp(16px, 2vw, 40px);
}

.catalog {
    padding: 40px 0 64px;
}

/* Le thème sombre de `site.css` ne passe pas que par des variables : ces deux
   règles visent un sélecteur, et survivaient donc au fond clair — la barre
   restait vert-nuit au-dessus d'une devanture blanche. */
@media (prefers-color-scheme: dark) {
    :root:has(.catalog) header.site {
        background: rgba(248, 251, 248, 0.92);
    }

    :root:has(.catalog) .btn-ghost,
    :root:has(.catalog) .btn-ghost:hover {
        background: var(--surface);
        color: var(--green-dark);
    }
}

/* Le focus au clavier est dessiné, jamais laissé au navigateur : l'anneau bleu
   par défaut ne suit pas les formes arrondies des cartes et des puces. */
.catalog a:focus-visible,
.catalog button:focus-visible,
.catalog input:focus-visible,
.catalog select:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Intitulé lu par un lecteur d'écran, invisible à l'œil : les champs de filtre
   se comprennent seuls avec leur texte d'invite, un champ sans `label` reste
   pour autant muet à qui navigue à la voix. */
.catalog .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════ Entête */

.catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}

.catalog-head-text {
    max-width: 620px;
}

.catalog-head-text h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
}

.catalog-head-text .lead {
    margin: 10px 0 0;
}

/* Fil d'Ariane : dit où l'on est et remonte d'un cran, sur des pages où l'on
   arrive le plus souvent par un lien de partage, sans avoir vu l'annuaire. */
.catalog-crumbs {
    margin: 0 0 20px;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.catalog-crumbs a {
    font-weight: 600;
    text-decoration: none;
}

.catalog-crumbs a:hover {
    text-decoration: underline;
}

/* ═════════════════════════════════════════════════════════ Champ de recherche */

.catalog-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 320px;
    max-width: 460px;
    padding: 6px 6px 6px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.catalog-searchbar:focus-within {
    border-color: var(--green);
}

.catalog-searchbar svg {
    flex: none;
    color: var(--ink-soft);
}

.catalog-searchbar input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: none;
    border: 0;
}

.catalog-searchbar input:focus-visible {
    outline: none;
}

.catalog-searchbar .btn {
    padding: 10px 18px;
}

/* ═══════════════════════════════════════════════════════ Corps en deux temps
 *
 * Les filtres à gauche, la liste à droite ; empilés sous 900 px, où une colonne
 * de 250 px ne laisserait pas la place aux lignes de la liste.
 */

.catalog-body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 36px;
    align-items: start;
}

@media (max-width: 900px) {
    .catalog-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.catalog-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .catalog-aside {
        position: static;
    }
}

.catalog-aside-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.catalog-aside-title h2 {
    font-size: 1.05rem;
}

.catalog-aside-clear {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.catalog-aside-clear:hover {
    text-decoration: underline;
}

.catalog-legend {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.catalog-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Filtre par pays : une ligne par entrée, avec son compte -------------- */

.catalog-countries,
.catalog-chips,
.catalog-rows,
.catalog-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-countries {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.catalog-country {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
}

.catalog-country:hover {
    color: var(--green-dark);
    background: var(--green-wash);
}

.catalog-country .count {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.catalog-country.is-active {
    color: #fff;
    background: var(--green);
    font-weight: 650;
}

.catalog-country.is-active .count {
    color: inherit;
    opacity: 0.8;
}

/* --- Filtre par secteur : des puces, qui s'enroulent --------------------- */

.catalog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.catalog-chip:hover {
    color: var(--green-dark);
    background: var(--green-wash);
    border-color: var(--green);
}

.catalog-chip.is-active {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
}

/* Puce d'un filtre posé, qu'on retire en cliquant — le « ✕ » n'est pas une
   cible à part : toute la puce est le lien de retrait. L'or du drapeau, qui ne
   sert qu'à ça sur ces pages. */
.catalog-chip-on {
    color: var(--gold-dark);
    background: #fdf6d8;
    border-color: var(--gold);
}

.catalog-chip-on:hover {
    color: var(--gold-dark);
    background: #fbefc0;
    border-color: var(--gold-dark);
}

/* --- Encart commerçant, au bas de la colonne de filtres ------------------
 *
 * Perdu dans la réécriture de cette feuille, il s'affichait sans style : ni
 * fond, ni retrait, et son bouton à la largeur de son libellé.
 */

.catalog-pitch {
    padding: 18px;
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.catalog-pitch h2 {
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.catalog-pitch p {
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* Le bouton prend toute la largeur de l'encart, son libellé centré : à la
   largeur de son texte, il flottait contre le bord gauche sous deux lignes de
   paragraphe, et se lisait comme un lien perdu plutôt que comme l'action de
   l'encart. `.btn` centre déjà son contenu. */
.catalog-pitch .btn {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════ Liste et barre */

.catalog-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.catalog-count {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.catalog-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.catalog-sort select {
    padding: 9px 14px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

/* Autant de colonnes que la largeur en porte, et non deux quoi qu'il arrive :
   sur un écran de bureau, deux lignes de 700 px laissaient un vide au milieu de
   chaque carte, et sur un téléphone la même règle les comprimait. 320 px est la
   largeur sous laquelle le nom d'une boutique n'a plus la place de tenir à côté
   de sa vignette et de son étiquette. */
.catalog-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.catalog-row {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.catalog-row:hover {
    border-color: var(--green);
}

/* Vignette d'une boutique : son logo, ou une devanture. Jamais l'initiale du
   nom — c'est le choix de l'application, où soixante-dix lettres empilées se
   lisaient comme un nuancier plutôt qu'un annuaire, et une image commune dit
   clairement « pas encore de logo » sans y ajouter de bruit. */
.catalog-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--green-wash);
    border-radius: 14px;
}

.catalog-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-logo svg {
    width: 26px;
    height: 26px;
    color: var(--green);
    opacity: 0.55;
}

.catalog-row-text {
    flex: 1;
    min-width: 0;
}

.catalog-row-text h2,
.catalog-row-text h3 {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    /* Un nom long ne pousse pas l'étiquette hors de la carte. */
    overflow-wrap: anywhere;
}

.catalog-meta {
    margin: 3px 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.catalog-row-aside {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.catalog-row-aside svg {
    width: 18px;
    height: 18px;
    color: var(--ink-soft);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════ Étiquettes */

.catalog-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--green-wash);
}

.catalog-tag-neutral {
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--line);
}

.catalog-tag-gold {
    color: var(--gold-dark);
    background: #fdf6d8;
}

/* ══════════════════════════════════════════════════════ Grille de produits
 *
 * `auto-fill` et non un nombre de colonnes fixe : la grille suit la largeur
 * disponible, de deux vignettes sur un téléphone à quatre sur un bureau, sans
 * point de rupture à maintenir.
 */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.catalog-card:hover {
    border-color: var(--green);
}

/* Cadre à rapport fixe : des photos de proportions inégales décalaient les
   noms d'une carte à l'autre, et la grille se lisait de travers. */
.catalog-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--green-wash);
}

.catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-thumb-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.catalog-thumb-empty svg {
    width: 34px;
    height: 34px;
    color: var(--green);
    opacity: 0.4;
}

.catalog-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px 14px;
}

.catalog-card-body h3 {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.catalog-price {
    font-weight: 700;
    color: var(--green-dark);
}

/* ═══════════════════════════════════════════════════════════ Entête de boutique */

.catalog-shop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 22px;
    margin-bottom: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.catalog-shop .catalog-logo {
    width: 88px;
    height: 88px;
    border-radius: 18px;
}

.catalog-shop .catalog-logo svg {
    width: 40px;
    height: 40px;
}

.catalog-shop-identity {
    flex: 1 1 280px;
}

.catalog-shop-identity h1 {
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}

.catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════ Fiche produit */

/* La fiche d'un article est la seule page du catalogue qui reste bornée : sa
   description est du texte suivi, et sur toute la largeur d'un écran de bureau
   une ligne de deux cents caractères se perd d'un bord à l'autre. La photo n'y
   gagnerait rien non plus, agrandie au-delà de ce que le commerçant a
   photographié. */
.catalog-product {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    align-items: start;
    max-width: 1180px;
}

/* Le cadre est porté par ce qu'il y a dedans — le diaporama a le sien, l'état
   vide le sien : un cadre commun rognait les flèches posées sur l'image. */
.catalog-product-photo {
    min-width: 0;
}

.catalog-product-photo .catalog-thumb-empty {
    aspect-ratio: 4 / 3;
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.catalog-product-photo .catalog-thumb-empty svg {
    width: 64px;
    height: 64px;
}

.catalog-product-info h1 {
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.catalog-product-price {
    margin: 0 0 16px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-dark);
}

.catalog-product-description {
    margin: 16px 0;
    color: var(--ink-soft);
    white-space: pre-line;
}

.catalog-product-shop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 22px 0 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.catalog-product-shop:hover {
    border-color: var(--green);
}

.catalog-product-shop .catalog-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.catalog-product-shop .catalog-logo svg {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════════════════════════════ Pagination */

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.catalog-pagination a,
.catalog-pagination span {
    padding: 9px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
}

.catalog-pagination a:hover {
    color: var(--green-dark);
    background: var(--green-wash);
    border-color: var(--green);
}

.catalog-pagination .is-current {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
}

.catalog-pagination .is-disabled {
    color: var(--ink-soft);
    opacity: 0.55;
}

/* ═════════════════════════════════════════════════════════════════════ Vide */

.catalog-empty {
    padding: 44px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.catalog-empty p {
    margin: 0 0 12px;
}

/* ═══════════════════════════════════════════════════ Appel en pied de page
 *
 * En bas et non en tête : ce n'est pas ce que le visiteur vient chercher ici —
 * même raison que le bandeau au milieu de la grille dans l'application.
 */

.catalog-seller {
    margin-top: 48px;
    padding: 28px 24px;
    text-align: center;
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.catalog-seller h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.catalog-seller p {
    margin: 0 auto 16px;
    max-width: 52ch;
    color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Annuaire — mise en page reprise du handoff « Catalogue Boutiques »
 * (Claude Design), avec la palette et la police du site : ni crème, ni noir,
 * ni police externe. Une première version reprenait aussi la couleur du
 * handoff (fond crème, encarts noirs, Caprasimo/Figtree) ; elle détonnait
 * avec la fiche boutique juste à côté, que cette page ouvre elle-même —
 * même défaut que le thème sombre plus haut, une identité qui ne se
 * reconnaît plus d'une page à l'autre. Cette version-ci ne change que la
 * mise en page : héros, statistiques, boutique du mois, colonne de filtres,
 * grille de cartes — tout le reste (couleurs, rayons, boutons, vignettes)
 * vient des règles ci-dessus, déjà partagées avec la fiche boutique.
 * ═══════════════════════════════════════════════════════════════════════ */

.catalog-directory {
    padding: 0 0 72px;
}

/* ═══════════════════════════════════════════════════════════════════ Hero */

.dir-hero {
    padding: 48px 0 40px;
    background:
        radial-gradient(900px 340px at 88% -12%, rgba(252, 209, 22, 0.14), transparent 60%),
        radial-gradient(700px 300px at 6% 100%, rgba(11, 122, 51, 0.10), transparent 60%);
}

.dir-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .dir-hero-grid {
        grid-template-columns: 1fr;
    }
}

.dir-hero-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Une grille dimensionne sa colonne sur le contenu le plus large qu'elle
       porte, et un enfant flexible garde par défaut un minimum tenu par son
       propre contenu : sans ce zéro, la colonne de texte pouvait forcer toute
       la ligne — panneau boutique compris, une fois la grille repliée sur une
       seule colonne — plus large que l'écran. */
    min-width: 0;
}

.dir-eyebrow {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-dark);
    background: var(--green-wash);
    padding: 7px 16px;
    border-radius: 999px;
}

.dir-hero-text h1 {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.06;
    max-width: 16ch;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.dir-lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 52ch;
}

.dir-searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    padding: 6px 6px 6px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
}

.dir-searchbar:focus-within {
    border-color: var(--green);
}

.dir-searchbar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 1rem;
    padding: 8px 0;
    color: var(--ink);
}

.dir-searchbar-sep {
    width: 1px;
    height: 26px;
    background: var(--line);
    flex: none;
}

.dir-searchbar-country {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0 6px;
    white-space: nowrap;
}

/*
 * En dessous de cette largeur, la barre (recherche + séparateur + pays +
 * bouton) ne tient plus sur une ligne : sans repli, son minimum incompressible
 * (~485px, mesuré) forçait toute la colonne unique du héros à cette largeur —
 * boutique du mois et bandeau « Nouveau » compris — et débordait la page
 * plutôt que de rester dans l'écran.
 */
@media (max-width: 560px) {
    .dir-searchbar {
        flex-wrap: wrap;
        row-gap: 10px;
        /* 999px suppose une seule ligne, haute comme le champ : sur deux
           lignes le rayon effectif grandit avec la boîte et mord sur le
           bouton, qui semblait alors déborder du coin arrondi. */
        border-radius: 22px;
        padding: 14px 14px 14px 18px;
    }

    .dir-searchbar-sep {
        flex-basis: 100%;
        width: auto;
        height: 1px;
        margin: 0;
    }

    .dir-searchbar-country {
        flex: 1;
        padding-left: 0;
    }
}

.dir-stats {
    display: flex;
    gap: 36px;
    padding-top: 6px;
}

.dir-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dir-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.dir-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* — panneau décoratif de droite — */
.dir-hero-visual {
    position: relative;
    min-height: 480px;
}

/*
 * Même démonstration qu'à l'accueil, réduite à la taille de la carte
 * boutique juste en dessous : ici, c'est une vignette qui donne envie de
 * cliquer, pas la façon de regarder en entier — `cover`, et non `contain`,
 * remplit le cadre plutôt que de laisser des bandes vides autour d'un
 * enregistrement vertical.
 */
.dir-hero-video.video-frame {
    position: absolute;
    left: 12px;
    top: 0;
    width: 240px;
    height: 190px;
    border-radius: var(--radius);
    box-shadow: 0 14px 32px -18px rgba(18, 33, 26, 0.35);
}

.dir-hero-video.video-frame video {
    object-fit: cover;
}

.dir-hero-video .video-play-icon {
    width: 46px;
    height: 46px;
}

.dir-hero-visual-wash {
    position: absolute;
    inset: 0;
    background: var(--green-wash);
    border-radius: 999px;
}

.dir-hero-card {
    position: absolute;
    left: 12px;
    top: 210px;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 32px -18px rgba(18, 33, 26, 0.35);
    text-decoration: none;
    color: inherit;
}

.dir-hero-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dir-hero-card-name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}

.dir-hero-card-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.dir-hero-card-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dir-hero-card-blocks span {
    overflow: hidden;
    height: 54px;
    border-radius: 10px;
    background: var(--green-wash);
}

.dir-hero-card-blocks img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dir-hero-card-blocks span:nth-child(2) { background: #fff3e0; }
.dir-hero-card-blocks span:nth-child(3) { background: var(--bg); border: 1px solid var(--line); }
.dir-hero-card-blocks span:nth-child(4) { background: rgba(11, 122, 51, 0.16); }

.dir-hero-card-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green-dark);
}

/* Toujours en vert du site, jamais en noir : c'est un bandeau de bonne
   nouvelle, au même titre qu'un bouton principal. */
.dir-hero-toast {
    position: absolute;
    right: 0;
    bottom: 16px;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 14px 32px -16px rgba(11, 122, 51, 0.45);
}

.dir-hero-toast-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f5ead8;
}

.dir-hero-toast span:last-child {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ═════════════════════════════════════════════════════ Corps de l'annuaire */

.dir-body {
    padding-top: 40px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .dir-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.dir-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .dir-aside {
        position: static;
    }
}

.dir-aside-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dir-aside-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.dir-country-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dir-country {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.dir-country:hover {
    background: var(--green-wash);
    color: var(--green-dark);
}

.dir-country-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.dir-country.is-active {
    background: var(--green);
    color: #fff;
    font-weight: 650;
}

.dir-country.is-active .dir-country-count {
    color: inherit;
    opacity: 0.85;
}

.dir-sector-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dir-sector-chip {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.dir-sector-chip:hover {
    border-color: var(--green);
    color: var(--green-dark);
    background: var(--green-wash);
}

.dir-sector-chip.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.dir-aside-toggles {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.dir-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.dir-switch {
    flex: none;
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: var(--line);
    position: relative;
}

.dir-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--surface);
    transition: left 0.15s ease;
}

.dir-switch.is-on {
    background: var(--green);
}

.dir-switch.is-on span {
    left: 20px;
    background: #fff;
}

.dir-clear {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* — filtres posés, chacun retirable seul — */
.dir-applied-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.dir-chip-on {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-dark);
    background: #fdf6d8;
    border: 1px solid var(--gold);
    border-radius: 999px;
    text-decoration: none;
}

.dir-chip-on:hover {
    color: var(--gold-dark);
    background: #fbefc0;
    border-color: var(--gold-dark);
}

/* — appel « ouvrir ma boutique », toujours dans la colonne de filtres —
   Sur fond `--green-wash` uni, comme `.catalog-pitch` : un bouton plein vert
   sur un aplat de la même famille passait inaperçu (« trop dégradé, on ne le
   voit pas bien »). Le bouton reprend `.btn.btn-primary` du site — dégradé et
   ombre compris — plutôt qu'un aplat propre à cette page. */
.dir-pitch-aside {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.dir-pitch-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

.dir-pitch-aside p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.dir-btn-block {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
}

/* — barre d'outils — */
.dir-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 24px;
}

.dir-toolbar-count {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dir-toolbar-count h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.dir-toolbar-tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-dark);
    background: var(--green-wash);
    border-radius: 999px;
    padding: 6px 14px;
}

.dir-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.dir-sort select {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
}

/* — bandeau boutique du mois — en dégradé vert, comme un bouton principal :
   c'est une mise en avant à saisir, pas une carte d'identité. */
.dir-featured {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 28px;
    margin-bottom: 28px;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    border-radius: var(--radius);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 16px 36px -20px rgba(11, 122, 51, 0.5);
}

@media (max-width: 560px) {
    .dir-featured {
        flex-direction: column;
        align-items: flex-start;
    }
}

.dir-featured-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dir-featured-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f5ead8;
}

.dir-featured-name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.dir-featured-meta {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.82);
}

.dir-featured .dir-btn-light {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    background: #fff;
    color: var(--green-dark);
}

.dir-featured .dir-btn-light:hover {
    background: #f5ead8;
}

/* — grille des boutiques — */
.dir-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 720px) {
    .dir-grid {
        grid-template-columns: 1fr;
    }
}

.dir-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dir-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px -20px rgba(18, 33, 26, 0.4);
    border-color: var(--green);
}

/* Trois vignettes à hauteur fixe : les photos d'un commerçant n'ont pas deux
   fois les mêmes proportions, et la grille se lisait de travers sans ce cadre.
   `margin-top: auto` colle la bande au bas de la carte, au-dessus du pied :
   les cartes n'ont pas toutes le même nombre de lignes de texte. */
.dir-card-shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: auto;
}

.dir-card-shots img {
    display: block;
    width: 100%;
    height: 62px;
    object-fit: cover;
    background: var(--green-wash);
    border-radius: 10px;
}

.dir-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dir-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dir-card-name {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dir-card-meta {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.dir-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.dir-badge {
    font-size: 0.78rem;
    font-weight: 650;
    border-radius: 999px;
    padding: 4px 10px;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--line);
}

.dir-badge-on {
    color: var(--green-dark);
    background: var(--green-wash);
    border-color: transparent;
}

.dir-card-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green-dark);
}

/* — vignette d'une boutique : `.catalog-logo` de `partials/logo.blade.php`,
   redimensionnée selon son contexte, sans changer sa couleur — c'est la même
   vignette que sur la fiche boutique (`.catalog-shop .catalog-logo`). */
.dir-hero-card .catalog-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.dir-card-head .catalog-logo {
    width: 56px;
    height: 56px;
}

.dir-featured .catalog-logo {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
}

.dir-featured .catalog-logo svg {
    color: #fff;
    opacity: 0.85;
}

/* — charger plus — */
.dir-loadmore {
    display: flex;
    justify-content: center;
    padding-top: 28px;
}

/* — état vide — */
.dir-empty {
    padding: 44px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.dir-empty p {
    margin: 0 0 12px;
}

/* ------------------------------------------------------------------
   Carrousels — vitrine d'une boutique, diaporama d'une fiche.

   Le défilement est natif : `scroll-snap` cale la diapositive, le doigt fait
   le reste. Ce site n'a pas d'étape de build et charge un seul script inline ;
   les flèches et les pastilles n'apparaissent qu'une fois ce script en place
   (`is-enhanced`), pour ne jamais montrer un bouton qui ne ferait rien.
   ------------------------------------------------------------------ */

/* `padding: 0` explicite : `site.css` pose 104 points de remplissage sur tout
   `section` — la mise en page de l'accueil — et le carrousel héritait d'un
   trou blanc au-dessus et en dessous de lui. */
.showcase {
    padding: 0;
    margin: 0 0 34px;
}

.showcase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.showcase-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.showcase-nav {
    display: none;
    gap: 8px;
}

.is-enhanced .showcase-nav {
    display: flex;
}

.showcase-nav button,
.product-slider-nav button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.showcase-nav button:hover:not(:disabled),
.product-slider-nav button:hover:not(:disabled) {
    color: var(--green-dark);
    border-color: var(--green);
}

.showcase-nav button:disabled,
.product-slider-nav button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* La barre de défilement est masquée : la bande se fait glisser, et les
   pastilles disent où l'on en est. Elle reste atteignable au clavier. */
.showcase-track,
.product-slider-track,
.product-thumbs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.showcase-track::-webkit-scrollbar,
.product-slider-track::-webkit-scrollbar,
.product-thumbs::-webkit-scrollbar {
    display: none;
}

.showcase-track {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Une diapositive et un bout de la suivante à l'écran : ce débord est ce qui
   dit qu'il y a autre chose à voir, mieux qu'une flèche. */
.showcase-slide {
    flex: 0 0 min(330px, 82%);
    scroll-snap-align: start;
}

.showcase-slide > a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.showcase-slide > a:hover {
    border-color: var(--green);
}

.showcase-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--green-wash);
}

.showcase-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nom et prix posés sur la photo, comme l'étiquette sur l'article : à côté,
   ils allongeaient la bande et la photo perdait la moitié de sa place. */
.showcase-caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 30px 14px 12px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.showcase-caption strong {
    font-size: 1rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-caption span {
    font-size: 0.95rem;
    font-weight: 700;
}

.showcase-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 650;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
}

.showcase-dots,
.product-dots {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.is-enhanced .showcase-dots {
    display: flex;
}

.showcase-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    background: var(--line);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.showcase-dots button.is-active {
    width: 20px;
    background: var(--green);
}

@media (max-width: 640px) {
    .showcase-slide {
        flex-basis: 86%;
    }
}

/* — diaporama d'une fiche produit — */
.product-slider {
    position: relative;
    overflow: hidden;
    background: var(--green-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.product-slider-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.product-slider-track > li {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.product-slider-track img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Les flèches sont posées sur l'image : à côté, elles poussaient le prix et le
   bouton WhatsApp sous la ligne de flottaison sur un téléphone. */
.product-slider-nav {
    display: none;
}

.is-enhanced .product-slider-nav {
    display: block;
}

.product-slider-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    color: #17251c;
}

.product-slider-nav button[data-carousel-prev] {
    left: 12px;
}

.product-slider-nav button[data-carousel-next] {
    right: 12px;
}

.product-slider-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 650;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
}

.product-thumbs {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.product-thumbs a {
    display: block;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    opacity: 0.65;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.product-thumbs a:hover,
.product-thumbs a.is-active {
    opacity: 1;
    border-color: var(--green);
}

.product-thumbs img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* Tout tient à l'écran, rien ne déborde : plus rien à commander. Écrit après
   les règles `.is-enhanced`, qui l'emportaient sinon — même spécificité, et
   c'est la dernière écrite qui gagne. */
.is-static .showcase-nav,
.is-static .showcase-dots,
.is-static .product-slider-nav,
.is-static .product-slider-counter {
    display: none;
}