/* ==========================================================================
   LE CATALOGUE MATÉRIEL (maquette client « catalogue-materiel »)

   Complète agent.css, qui fournit le reset, le body, le fil d'Ariane et la
   palette de marque, et listing.css, qui fournit le bandeau sombre du hero.
   La maquette redéclarait ces deux blocs à l'identique, plus tout le CSS d'un
   listing d'agents (grille de cartes, barre de filtres par rôle, actualités,
   accordéon SEO) sans aucun balisage correspondant dans la page : rien n'en a
   été repris.

   TOUTES les règles sont scopées sous .catalogue-page, sans exception. La
   feuille est chargée dans @section('head'), donc AVANT agent.css et
   mega-menu.css : un sélecteur nu (.prod, .chip, .empty…) y perdrait ses
   arbitrages de spécificité et surtout déborderait sur le reste du site.

   --hdr-h N'EST PAS REDÉCLARÉE : elle vient de mega-menu.css (72 px, 62 px
   sur mobile), et la colonne de filtres s'y cale pour rester sous l'en-tête.

   Le violet de la page est celui de la rubrique « Setup & Matériel » du
   carrefour et des blocs catalogue de l'index : les deux pages se répondent.
   Les pastilles de rayons, elles, prennent la couleur SAISIE au back-office,
   jamais une couleur figée ici.
   ========================================================================== */

  .catalogue-page {
    --cat-accent: #b44ddf;
    --cat-accent-dark: #9a3cc4;
    --cat-accent-light: #f3e6fc;
  }

  /* ===== HERO ===== */
  /* La composition de la maquette : le texte à gauche, le bouton des guides à
     droite, alignés sur la même ligne de base. */
  .catalogue-page .ch-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
  }
  .catalogue-page .ch-text { max-width: 620px; }
  .catalogue-page .ch-guides {
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 10px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8); font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; text-decoration: none; transition: all 0.2s; white-space: nowrap;
  }
  .catalogue-page .ch-guides:hover {
    background: rgba(255,255,255,0.13); transform: translateY(-2px); color: var(--white);
  }

  /* ===== MISE EN PAGE ===== */
  .catalogue-page .shell {
    max-width: 1320px; margin: 0 auto; padding: 26px 40px 40px;
    display: grid; grid-template-columns: 248px 1fr; gap: 32px; align-items: start;
  }

  /* ===== FILTRES ===== */
  .catalogue-page .filters { position: sticky; top: calc(var(--hdr-h) + 20px); }
  .catalogue-page .fbox {
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
  }
  .catalogue-page .fgroup { padding: 18px 20px; border-bottom: 1px solid #f2f2f2; }
  .catalogue-page .fgroup:last-child { border-bottom: none; }
  .catalogue-page .fgroup h3 {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-light); margin-bottom: 12px;
  }
  .catalogue-page .fopt {
    display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; user-select: none;
  }
  .catalogue-page .fopt input { position: absolute; opacity: 0; pointer-events: none; }
  .catalogue-page .fopt .box {
    width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #ddd; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: all 0.18s;
    background: var(--white);
  }
  /* La coche est dessinée en CSS, sans caractère : le site ne pose aucun
     pictogramme de police dans ses pages. */
  .catalogue-page .fopt .box::after {
    content: ''; width: 4px; height: 8px; margin-top: -2px;
    border: solid var(--white); border-width: 0 2px 2px 0;
    transform: rotate(45deg); opacity: 0; transition: opacity 0.15s;
  }
  .catalogue-page .fopt input:checked + .box { background: var(--cat-accent); border-color: var(--cat-accent); }
  .catalogue-page .fopt input:checked + .box::after { opacity: 1; }
  .catalogue-page .fopt input:focus-visible + .box { outline: 2px solid var(--cat-accent); outline-offset: 2px; }
  .catalogue-page .fopt .lbl {
    font-size: 0.82rem; color: var(--text); flex: 1; display: flex; align-items: center; gap: 8px;
  }
  .catalogue-page .fopt .lbl .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .catalogue-page .fopt .cnt { font-size: 0.7rem; color: #b4b4b4; font-weight: 600; }
  .catalogue-page .fopt:hover .lbl { color: var(--dark); }
  .catalogue-page .fclear {
    width: 100%; padding: 11px; border: none; background: var(--bg); color: var(--text-light);
    font-family: 'DM Sans', sans-serif; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; cursor: pointer; transition: all 0.18s;
  }
  .catalogue-page .fclear:hover { background: var(--cat-accent-light); color: var(--cat-accent-dark); }
  .catalogue-page .ftoggle { display: none; }

  /* ===== BARRE DE RÉSULTATS ===== */
  .catalogue-page .rbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
  }
  .catalogue-page .rcount { font-size: 0.84rem; color: var(--text-light); }
  .catalogue-page .rcount strong { color: var(--dark); font-size: 0.95rem; }
  .catalogue-page .rtools { display: flex; align-items: center; gap: 10px; }
  .catalogue-page .rsearch {
    width: 240px; padding: 9px 13px; border: 1px solid #e4e4e4; border-radius: 9px;
    font-family: 'DM Sans', sans-serif; font-size: 0.79rem; color: var(--text);
    background: var(--white); outline: none; transition: border-color 0.2s;
  }
  .catalogue-page .rsearch:focus { border-color: var(--cat-accent); }
  .catalogue-page .rsearch::placeholder { color: #bbb; }
  .catalogue-page .rsort {
    padding: 9px 13px; border: 1px solid #e4e4e4; border-radius: 9px; background: var(--white);
    font-family: 'DM Sans', sans-serif; font-size: 0.79rem; color: var(--text); cursor: pointer;
    outline: none;
  }
  .catalogue-page .rsort:focus { border-color: var(--cat-accent); }

  /* ===== ÉTIQUETTES DE FILTRES ACTIFS ===== */
  .catalogue-page .active-tags { display: flex; gap: 7px; flex-wrap: wrap; }
  .catalogue-page .active-tags:not(:empty) { margin-bottom: 16px; }
  .catalogue-page .atag {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 7px;
    background: var(--cat-accent-light); color: var(--cat-accent-dark); font-size: 0.73rem;
    font-weight: 700;
  }
  .catalogue-page .atag button {
    background: none; border: none; color: inherit; cursor: pointer; font-size: 0.85rem;
    line-height: 1; padding: 0; opacity: 0.6;
  }
  .catalogue-page .atag button:hover { opacity: 1; }

  /* ===== GRILLE DE PRODUITS ===== */
  .catalogue-page .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .catalogue-page .prod {
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.28s;
  }
  .catalogue-page .prod:hover {
    transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,0.09); border-color: transparent;
  }
  .catalogue-page .prod.hidden { display: none; }

  .catalogue-page .p-img {
    height: 168px; background: var(--white); display: flex; align-items: center; justify-content: center;
    position: relative; padding: 14px;
  }
  .catalogue-page .p-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  /* Sans photo, un cadre neutre : ni pictogramme ni image de remplacement. */
  .catalogue-page .p-img .ph {
    font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #c8c8c8;
  }
  .catalogue-page .p-badge {
    position: absolute; top: 11px; left: 11px; font-size: 0.54rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px;
    background: #f1f1f4; color: #999;
  }
  .catalogue-page .p-badge.fav { background: #ffe4ec; color: #c23a58; }
  .catalogue-page .p-cat {
    position: absolute; bottom: 11px; left: 11px; font-size: 0.56rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px;
    color: var(--white);
  }
  .catalogue-page .p-body { padding: 15px 17px 10px; flex: 1; display: flex; flex-direction: column; }
  .catalogue-page .p-brand {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: #b0b0b0; margin-bottom: 4px;
  }
  /* Le titre et la description sont bornés à l'affichage, jamais tronqués à la
     source : le texte saisi au back-office reste entier dans le HTML, seul le
     rendu s'arrête, avec les points de suspension posés par -webkit-line-clamp.
     Sans cette borne, un titre de vendeur à rallonge et une description
     marchande de dix lignes font des cartes de hauteurs très inégales.

     Même recette que .shop-card-title dans agent.css : les trois déclarations
     -webkit-box / -webkit-line-clamp / -webkit-box-orient vont ENSEMBLE, la
     dernière étant celle qu'on oublie et sans laquelle la boîte se dispose en
     ligne. `overflow: hidden` est ce qui déclenche l'ellipse.

     Le `flex: 1` de la description est conservé : c'est lui qui pousse le pied
     de carte en bas, et donc qui aligne prix et bouton d'une carte à l'autre.
     Il cohabite avec -webkit-box, la valeur d'affichage d'un enfant flex ne
     changeant rien à son statut d'élément flex. */
  .catalogue-page .p-body h3 {
    font-size: 0.88rem; font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .catalogue-page .p-body p {
    font-size: 0.74rem; color: var(--text-light); line-height: 1.55; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .catalogue-page .p-foot {
    padding: 12px 17px; border-top: 1px solid #f2f2f2; background: var(--bg);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .catalogue-page .p-price {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.12rem; color: var(--dark); letter-spacing: 0.5px;
  }
  .catalogue-page .p-btn {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--white); background: var(--cat-accent); padding: 8px 14px; border-radius: 7px;
    white-space: nowrap; transition: background 0.2s;
  }
  .catalogue-page .prod:hover .p-btn { background: var(--cat-accent-dark); }

  /* ===== ÉTAT VIDE ===== */
  .catalogue-page .empty {
    display: none; grid-column: 1 / -1; text-align: center; padding: 60px 20px;
    color: var(--text-light); font-size: 0.9rem;
  }
  .catalogue-page .empty.show { display: block; }
  .catalogue-page .empty button {
    margin-top: 16px; padding: 10px 22px; border: none; border-radius: 9px; background: var(--dark);
    color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
  }
  .catalogue-page .empty button:hover { background: var(--cat-accent); }

  /* ===== BANDEAU GUIDES ===== */
  .catalogue-page .help { background: var(--white); border-top: 1px solid #eee; }
  .catalogue-page .help-inner {
    max-width: 1320px; margin: 0 auto; padding: 38px 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  }
  .catalogue-page .help h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--dark);
    letter-spacing: 1px; margin-bottom: 6px;
  }
  .catalogue-page .help h2 em { color: var(--cat-accent-dark); font-style: normal; }
  .catalogue-page .help p { font-size: 0.85rem; color: var(--text-light); line-height: 1.65; max-width: 620px; }
  .catalogue-page .help-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 10px;
    background: var(--dark); color: var(--white); font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: all 0.2s;
    flex-shrink: 0;
  }
  .catalogue-page .help-btn:hover { background: var(--cat-accent); transform: translateY(-2px); }

  /* ===== MENTION D'AFFILIATION ===== */
  .catalogue-page .aff { max-width: 1320px; margin: 0 auto; padding: 26px 40px 50px; }
  .catalogue-page .aff-in {
    padding: 20px 24px; background: var(--bg); border: 1px solid #ececec; border-radius: 14px;
    font-size: 0.77rem; color: var(--text-light); line-height: 1.7;
  }

  /* Libellés réservés aux lecteurs d'écran (champ de recherche et tri). */
  .catalogue-page .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1200px) {
    .catalogue-page .pgrid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .catalogue-page .shell { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .catalogue-page .filters { position: static; }
    .catalogue-page .ftoggle {
      display: flex; align-items: center; justify-content: space-between; width: 100%;
      padding: 14px 18px; background: var(--white); border: 1px solid #ececec; border-radius: 14px;
      cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
      color: var(--dark);
    }
    .catalogue-page .ftoggle .chev {
      width: 8px; height: 8px; border-right: 2px solid #bbb; border-bottom: 2px solid #bbb;
      transform: rotate(45deg); transition: transform 0.25s;
    }
    .catalogue-page .filters.open .ftoggle .chev { transform: rotate(-135deg); }
    .catalogue-page .fbox { display: none; margin-top: 10px; }
    .catalogue-page .filters.open .fbox { display: block; }
    .catalogue-page .pgrid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .catalogue-page .ch-row { gap: 18px; }
    .catalogue-page .rbar { flex-direction: column; align-items: stretch; }
    .catalogue-page .rtools { flex-direction: column; }
    .catalogue-page .rsearch, .catalogue-page .rsort { width: 100%; }
    .catalogue-page .pgrid { grid-template-columns: 1fr; }
    .catalogue-page .help-inner, .catalogue-page .aff { padding-left: 20px; padding-right: 20px; }
  }