/* ==========================================================================
   SETUP ET MATÉRIEL, index du cluster (maquette client « setup-materiel-home »)

   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 et
   ses pastilles. La maquette redéclarait ces trois blocs à l'identique : rien
   n'en a été repris.

   Son premier bloc de style embarquait par ailleurs tout le CSS d'un listing
   d'agents (grille, cartes de rôle, actualités, barre de filtres) sans aucun
   balisage correspondant dans la page : écarté lui aussi.

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

   Code couleur de la page, repris de la maquette : le corail de la marque pour
   la partie éditoriale (guides, priorités, budget, FAQ), le violet pour tout ce
   qui mène au catalogue et aux goodies. Le violet est celui de la rubrique
   « Setup & Matériel » du carrefour (--c-setup de hub.css), les trois autres
   teintes de catégories sont celles des rôles.
   ========================================================================== */

  .setup-page {
    /* Les trois jetons de marque viennent d'agent.css : la maquette proposait
       des variantes voisines (#d14d67 et #fce4e9), écartées pour que la page
       tienne exactement la même teinte que le reste du site. */
    --set-accent: #E8637E;
    --set-accent-dark: #D54663;
    --set-accent-light: #FBE4E9;

    /* Les quatre familles de matériel, reprises par les pastilles du hero,
       les bandeaux de guides et les pastilles du catalogue. */
    --set-perif: #e8637e;
    --set-audio: #5c8ee6;
    --set-confort: #4cc9b0;
    --set-reglages: #e6b44d;
    --set-goodies: #b44ddf;
    --set-goodies-dark: #9a3cc4;
  }

  /* ===== SECTIONS ===== */
  .setup-page .sec { max-width: 1200px; margin: 0 auto; padding: 46px 40px; scroll-margin-top: 140px; }
  .setup-page .sec.tight { padding-top: 8px; }
  .setup-page .sec-head { margin-bottom: 26px; }
  .setup-page .sec-label {
    font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 3px;
    text-transform: uppercase; color: var(--set-accent-dark); margin-bottom: 8px;
  }
  .setup-page .sec h2 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; color: var(--dark);
    letter-spacing: 1px; line-height: 1.08; margin-bottom: 12px;
  }
  .setup-page .sec h2 em { color: var(--set-accent-dark); font-style: normal; }
  .setup-page .sec-intro { font-size: 0.9rem; color: var(--text-light); line-height: 1.8; max-width: 820px; }
  .setup-page .sec-intro strong { color: var(--text); font-weight: 600; }

  /* ===== LES DEUX PORTES ===== */
  .setup-page .doors { max-width: 1200px; margin: 0 auto; padding: 36px 40px 8px; }
  .setup-page .doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .setup-page .door {
    position: relative; overflow: hidden; border-radius: 20px; padding: 34px 34px 30px;
    text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 268px;
    transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s;
  }
  .setup-page .door:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(0,0,0,0.14); }
  .setup-page .door::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
  .setup-page .door.guides { background: var(--white); border: 1px solid #ececec; }
  .setup-page .door.guides:hover { border-color: transparent; }
  .setup-page .door.catalogue { background: linear-gradient(140deg, #0e0a14 0%, #241832 55%, #33204a 100%); }
  .setup-page .door.catalogue::after { background: radial-gradient(ellipse at 78% 25%, rgba(180,77,223,0.24) 0%, transparent 62%); }
  .setup-page .door > * { position: relative; z-index: 2; }
  .setup-page .door .d-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px; border-radius: 7px; margin-bottom: 16px;
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  }
  .setup-page .door.guides .d-badge { background: var(--set-accent-light); color: var(--set-accent-dark); }
  .setup-page .door.catalogue .d-badge { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.1); }
  .setup-page .door h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.85rem; letter-spacing: 1.5px; line-height: 1.05; margin-bottom: 10px; }
  .setup-page .door.guides h2 { color: var(--dark); }
  .setup-page .door.guides h2 em { color: var(--set-accent); font-style: normal; }
  .setup-page .door.catalogue h2 { color: var(--white); }
  .setup-page .door.catalogue h2 em { color: #c77ae8; font-style: normal; }
  .setup-page .door p { font-size: 0.87rem; line-height: 1.7; margin-bottom: 18px; flex: 1; }
  .setup-page .door.guides p { color: var(--text-light); }
  .setup-page .door.catalogue p { color: rgba(255,255,255,0.45); }
  .setup-page .door .d-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
  .setup-page .door .d-fact { display: flex; flex-direction: column; gap: 1px; }
  .setup-page .door .d-fact b { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: 0.5px; line-height: 1; }
  .setup-page .door.guides .d-fact b { color: var(--dark); }
  .setup-page .door .d-fact span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
  .setup-page .door.guides .d-fact span { color: #b4b4b4; }
  .setup-page .door .d-cta {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 24px; border-radius: 10px; font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.22s;
  }
  .setup-page .door.guides .d-cta { background: var(--dark); color: var(--white); }
  .setup-page .door.guides:hover .d-cta { background: var(--set-accent); gap: 13px; }
  .setup-page .door.catalogue .d-cta { background: var(--set-goodies); color: var(--white); box-shadow: 0 6px 22px rgba(180,77,223,0.32); }
  .setup-page .door.catalogue:hover .d-cta { background: var(--set-goodies-dark); gap: 13px; }

  /* ===== PRIORITÉS ===== */
  .setup-page .prio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
  .setup-page .prio-card {
    background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 22px;
    position: relative; overflow: hidden; transition: all 0.25s;
  }
  .setup-page .prio-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
  .setup-page .prio-card .pr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .setup-page .prio-card .pr-n { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1; color: #e6e6e6; }
  .setup-page .prio-card .pr-impact {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 9px; border-radius: 5px;
  }
  .setup-page .pr-impact.max { background: var(--set-accent-light); color: var(--set-accent-dark); }
  .setup-page .pr-impact.fort { background: #e6eefb; color: #3f6fc4; }
  .setup-page .pr-impact.moyen { background: #fbf2da; color: #9d7118; }
  .setup-page .pr-impact.zero { background: #f2f2f2; color: #888; }
  .setup-page .prio-card h3 { font-size: 0.92rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
  .setup-page .prio-card p { font-size: 0.79rem; color: var(--text-light); line-height: 1.65; }

  /* ===== GUIDES ===== */
  .setup-page .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .setup-page .guide-card {
    background: var(--white); border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; transition: all 0.3s ease;
  }
  .setup-page .guide-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(0,0,0,0.08); border-color: transparent; }
  /* EN RÉSERVE depuis le 03/08 : la grille ne compte plus que des cartes
     actives, le client ayant reporté les deux guides qui restaient en
     « Bientôt » (tapis, bureau). Les trois règles de l'état d'attente
     (.soon, .guide-soon, .gf-soon) sont conservées telles quelles : elles
     reserviront avec la prochaine carte en préparation. */
  .setup-page .guide-card.soon { opacity: 0.62; }

  /* EMPLACEMENTS DES VISUELS.
     Le dégradé de famille habille l'attente et continuera de porter le code
     couleur derrière les photos que le client déposera dans
     public/images/setup/. La vue pose la balise dès que le fichier existe,
     sans autre geste. Les pictogrammes de la maquette étaient des emojis : ils
     sont retirés (doctrine du site), seule la photo de souris déjà présente
     dans le projet a pris la place du sien. */
  .setup-page .guide-visual { height: 150px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .setup-page .guide-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
  .setup-page .guide-card:hover .guide-visual img { transform: scale(1.06); }
  .setup-page .gv-perif { background: linear-gradient(145deg, #200e16, #a8344e); }
  .setup-page .gv-audio { background: linear-gradient(145deg, #0e1420, #3a6cc4); }
  .setup-page .gv-confort { background: linear-gradient(145deg, #0e2018, #2a9478); }
  .setup-page .gv-reglages { background: linear-gradient(145deg, #201a0e, #c49a3a); }
  .setup-page .guide-badge {
    position: absolute; top: 12px; left: 12px; font-size: 0.56rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 5px;
    background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  }
  .setup-page .guide-soon {
    position: absolute; top: 12px; right: 12px; font-size: 0.54rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 9px; border-radius: 5px;
    background: rgba(255,255,255,0.85); color: #555;
  }
  .setup-page .guide-body { padding: 18px 20px 14px; flex: 1; display: flex; flex-direction: column; }
  .setup-page .guide-body h3 { font-size: 0.97rem; font-weight: 700; color: var(--dark); line-height: 1.32; margin-bottom: 7px; }
  .setup-page .guide-body h3 a { color: inherit; text-decoration: none; }
  .setup-page .guide-body h3 a:hover { color: var(--set-accent-dark); }
  .setup-page .guide-body p { font-size: 0.79rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; flex: 1; }
  .setup-page .guide-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 12px; border-top: 1px solid #f2f2f2;
  }
  .setup-page .guide-foot .gf-read {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--set-accent-dark); text-decoration: none;
  }
  .setup-page .guide-foot .gf-read:hover { text-decoration: underline; }
  .setup-page .guide-foot .gf-soon {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #bbb;
  }
  .setup-page .guide-foot .gf-cat { font-size: 0.68rem; color: #bbb; text-decoration: none; white-space: nowrap; }
  .setup-page .guide-foot .gf-cat:hover { color: var(--set-goodies); }

  /* ===== CATALOGUE ===== */
  .setup-page .cata { background: var(--white); border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
  .setup-page .cata-inner { max-width: 1200px; margin: 0 auto; padding: 46px 40px; }
  .setup-page .cata-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 24px; flex-wrap: wrap; }
  .setup-page .cata-top .sec-head { margin-bottom: 0; }
  .setup-page .cata-top .sec-label, .setup-page .cata h2 em { color: var(--set-goodies); }
  .setup-page .cata-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 10px;
    background: var(--set-goodies); color: var(--white); font-size: 0.77rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: all 0.2s;
    flex-shrink: 0; box-shadow: 0 6px 22px rgba(180,77,223,0.3);
  }
  .setup-page .cata-btn:hover { background: var(--set-goodies-dark); transform: translateY(-2px); }
  .setup-page .cata-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
  .setup-page .chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 10px;
    background: var(--bg); border: 1px solid #ececec; text-decoration: none; color: var(--text);
    font-size: 0.81rem; font-weight: 600; transition: all 0.2s;
  }
  .setup-page .chip:hover { background: var(--white); border-color: transparent; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.07); }
  .setup-page .chip .c-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

  /* PRODUITS DE LA SEMAINE. Le nombre de cartes suit les bandeaux actifs du
     back-office et n'est pas toujours de quatre : la grille se calcule donc au
     lieu d'être figée à quatre colonnes, qui laissaient les cartes au quart de
     la largeur quand il n'y en avait qu'une ou deux. À quatre cartes, le rendu
     est identique à celui de la maquette (4 pistes de 268 px pour 1120 px de
     large), les deux paliers responsive ci-dessous prenant le relais ensuite.
     Le plafond est posé sur la CARTE et non sur la piste : un maximum dans le
     minmax ferait compter les pistes sur cette valeur et casserait justement le
     rendu à quatre. Sans lui, une carte seule s'étirerait sur toute la largeur
     de la section. */
  .setup-page .prev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .setup-page .prev {
    background: var(--bg); border: 1px solid #ececec; border-radius: 14px; overflow: hidden;
    text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all 0.28s;
    max-width: 420px;
  }
  .setup-page .prev:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,0.08); background: var(--white); border-color: transparent; }
  .setup-page .prev-img { height: 132px; background: var(--white); display: flex; align-items: center; justify-content: center; position: relative; padding: 12px; }
  .setup-page .prev-img .ph { font-size: 0.56rem; color: #c8c8c8; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
  /* Photo du bandeau (03/08) : contain et non cover, comme sur les fiches
     produit du back-office, les visuels étant détourés sur fond blanc. */
  .setup-page .prev-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .setup-page .prev-tag {
    position: absolute; top: 10px; left: 10px; font-size: 0.54rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 5px;
    background: var(--set-accent-light); color: var(--set-accent-dark);
  }
  .setup-page .prev-body { padding: 13px 15px 14px; flex: 1; display: flex; flex-direction: column; }
  /* Bornage du titre, motif du catalogue matériel : le titre du vendeur reste
     ENTIER dans le HTML, seul son rendu s'arrête à deux lignes. Ces vignettes
     ne rendent pas de description, il n'y a donc rien à borner à trois. */
  .setup-page .prev-body h4 {
    font-size: 0.84rem; font-weight: 700; color: var(--dark); margin-bottom: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .setup-page .prev-body .p-cat { font-size: 0.66rem; color: #b4b4b4; margin-bottom: 9px; }
  /* Le ressort qui aligne les prix d'une carte à l'autre est porté par le PRIX
     et non plus par la catégorie : un bandeau sans emplacement n'affiche pas de
     ligne vide, et son prix reste malgré tout collé au bas de la carte. */
  .setup-page .prev-body .p-price { margin-top: auto; font-family: 'Bebas Neue', sans-serif; font-size: 1.02rem; color: var(--dark); letter-spacing: 0.5px; }

  /* ===== GOODIES ===== */
  .setup-page .goodies-band { background: linear-gradient(135deg, #120a1e 0%, #1e0e30 55%, #2a1440 100%); position: relative; overflow: hidden; }
  .setup-page .goodies-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 25% 40%, rgba(180,77,223,0.16) 0%, transparent 58%);
  }
  .setup-page .goodies-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 46px 40px; }
  .setup-page .goodies-inner .sec-label { color: var(--set-goodies); }
  .setup-page .goodies-inner h2 { color: var(--white); }
  .setup-page .goodies-inner h2 em { color: var(--set-goodies); }
  .setup-page .goodies-inner .sec-intro { color: rgba(255,255,255,0.42); }
  .setup-page .goodies-inner .sec-intro strong { color: rgba(255,255,255,0.8); }
  .setup-page .goodies-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 24px; }
  .setup-page .goodie {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
    padding: 22px 20px; text-decoration: none; color: inherit; transition: all 0.25s;
  }
  .setup-page .goodie:hover { background: rgba(255,255,255,0.07); transform: translateY(-4px); border-color: rgba(180,77,223,0.3); }
  .setup-page .goodie h3 { font-size: 0.87rem; font-weight: 700; color: var(--white); margin-bottom: 5px; }
  .setup-page .goodie p { font-size: 0.73rem; color: rgba(255,255,255,0.38); line-height: 1.55; }
  .setup-page .goodies-cta {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 10px;
    background: var(--set-goodies); color: var(--white); font-size: 0.77rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: all 0.2s;
    box-shadow: 0 6px 22px rgba(180,77,223,0.3);
  }
  .setup-page .goodies-cta:hover { background: var(--set-goodies-dark); transform: translateY(-2px); }

  /* ===== TABLEAU DU BUDGET =====
     La maquette posait sa légende en <caption>, à l'intérieur du cadre : elle
     poussait alors le bandeau sombre vers le bas et laissait une bande blanche
     en haut du cadre arrondi. Elle sort ici au-dessus, en p.table-note, comme
     sur les armes et sur le ranked, d'où le border-top retiré. */
  .setup-page .table-note { margin: 22px 0 0; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
  .setup-page .table-note + .table-wrap { margin-top: 10px; }
  .setup-page .table-wrap { border: 1px solid #ececec; border-top: 0; border-radius: 16px; overflow: hidden; background: var(--white); }
  .setup-page table { width: 100%; border-collapse: collapse; }
  .setup-page table thead th {
    background: var(--dark); color: rgba(255,255,255,0.85); font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem; letter-spacing: 1.6px; text-transform: uppercase; text-align: left;
    padding: 13px 22px; font-weight: 400;
  }
  .setup-page table thead th:first-child { color: rgba(255,255,255,0.95); }
  .setup-page table tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
  .setup-page table tbody tr:hover { background: #fdf7f8; }
  .setup-page table th[scope="row"] { text-align: left; padding: 14px 22px; font-size: 0.84rem; font-weight: 700; color: var(--dark); }
  .setup-page table td { padding: 14px 22px; font-size: 0.81rem; color: var(--text-light); }
  .setup-page table td.reco { color: var(--set-accent-dark); font-weight: 700; }
  .setup-page table tfoot td, .setup-page table tfoot th { background: var(--bg); font-weight: 700; color: var(--dark); font-size: 0.83rem; }

  /* ===== FAQ =====
     Questions ouvertes, sans accordéon : c'est ce que demande la maquette,
     comme sur le mode triche et le crosshair. */
  .setup-page .faq { display: grid; gap: 14px; margin-top: 22px; }
  .setup-page .qa { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 22px 24px; transition: all 0.22s; }
  .setup-page .qa:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  .setup-page .qa h3 { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 10px; font-size: 0.94rem; line-height: 1.4; color: var(--dark); }
  .setup-page .qa h3::before {
    content: '?'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--set-accent-light); color: var(--set-accent-dark); font-size: 0.82rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .setup-page .qa p { margin: 0; font-size: 0.87rem; color: var(--text-light); line-height: 1.85; }

  /* ===== NOTICE D'AFFILIATION =====
     L'emoji d'information de la maquette est retiré, comme sur les armes :
     aucun visuel du projet ne dit « information », et le titre porte le sens. */
  .setup-page .aff-notice { max-width: 1200px; margin: 0 auto 52px; padding: 0 40px; }
  .setup-page .aff-notice-inner { padding: 22px 26px; background: var(--bg); border: 1px solid #ececec; border-radius: 14px; }
  .setup-page .aff-notice-inner h3 { font-size: 0.86rem; font-weight: 700; color: var(--dark); margin-bottom: 5px; }
  .setup-page .aff-notice-inner p { font-size: 0.78rem; color: var(--text-light); line-height: 1.7; }

  @media (max-width: 1024px) {
    .setup-page .doors-grid { grid-template-columns: 1fr; }
    .setup-page .prio { grid-template-columns: 1fr 1fr; }
    .setup-page .guides-grid { grid-template-columns: 1fr 1fr; }
    .setup-page .prev-grid { grid-template-columns: 1fr 1fr; }
    .setup-page .goodies-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 768px) {
    .setup-page .doors { padding: 24px 20px 0; }
    .setup-page .door { padding: 26px 22px 24px; min-height: auto; }
    .setup-page .door h2 { font-size: 1.5rem; }
    .setup-page .sec { padding: 32px 20px; }
    .setup-page .sec h2 { font-size: 1.4rem; }
    .setup-page .prio,
    .setup-page .guides-grid,
    .setup-page .prev-grid,
    .setup-page .goodies-grid { grid-template-columns: 1fr; }
    .setup-page .cata-inner, .setup-page .goodies-inner { padding: 32px 20px; }
    .setup-page .cata-top { flex-direction: column; align-items: flex-start; }
    .setup-page .aff-notice { padding: 0 20px; margin-bottom: 36px; }
    .setup-page .aff-notice-inner { padding: 20px; }

    /* Repli du tableau en blocs, comme les tableaux des armes et du ranked. */
    .setup-page table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .setup-page table tbody tr, .setup-page table tfoot tr { display: block; padding: 14px 18px; }
    .setup-page table th[scope="row"] { display: block; padding: 0 0 8px; }
    .setup-page table td { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
    .setup-page table td::before {
      content: attr(data-label); font-weight: 700; color: #bbb; font-size: 0.68rem;
      text-transform: uppercase; letter-spacing: 0.5px; align-self: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .setup-page .door,
    .setup-page .prio-card,
    .setup-page .guide-card,
    .setup-page .chip,
    .setup-page .prev,
    .setup-page .goodie,
    .setup-page .cata-btn,
    .setup-page .goodies-cta { transition: none; }
    .setup-page .door:hover,
    .setup-page .prio-card:hover,
    .setup-page .guide-card:hover,
    .setup-page .chip:hover,
    .setup-page .prev:hover,
    .setup-page .goodie:hover { transform: none; }
  }