/* =====================================================================
   catalogue-listings.css : déclinaisons du monde « carte des départements »
   pour les listings sans carte (codes NAF, catégories) et le listing
   particuliers. Complète catalogue.css, ne le remplace pas.
   ===================================================================== */

/* Sections NAF : une teinte par section, comme les régions (lue par tuiles, réglette, légende et fiches) */
.n-a { --rc: #C4E39A; }
.n-b { --rc: #D6C4EC; }
.n-c { --rc: #B4C4EE; }
.n-d { --rc: #F3E27A; }
.n-e { --rc: #B6DFF1; }
.n-f { --rc: #F5B27E; }
.n-g { --rc: #8FBDE6; }
.n-h { --rc: #EDA4BA; }
.n-i { --rc: #F9D57F; }
.n-j { --rc: #9EDCC4; }
.n-k { --rc: #F2C078; }
.n-l { --rc: #F79E9E; }
.n-m { --rc: #B6DFF1; }
.n-n { --rc: #D6C4EC; }
.n-o { --rc: #B4C4EE; }
.n-p { --rc: #F3E27A; }
.n-q { --rc: #F7C9A4; }
.n-r { --rc: #9EDCC4; }
.n-s { --rc: #EDA4BA; }
.n-t, .n-u { --rc: #DCE3EE; }

/* Teinte de catégorie (une par page) */
.cq--cat-1 { --rc: #B4C4EE; }
.cq--cat-2 { --rc: #F3E27A; }
.cq--cat-3 { --rc: #F79E9E; }
.cq--cat-4 { --rc: #F9D57F; }

/* ---------- planche de tuiles dans le héros (à la place de la carte) ---------- */
.cq-planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: center; filter: drop-shadow(0 22px 26px rgba(0,0,0,.28)); }
.cq-tuile { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 86px; padding: 10px 12px 9px; background: linear-gradient(var(--rc, #DCE3EE), var(--rc, #DCE3EE)) top / 100% 5px no-repeat rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); border-radius: 6px; padding-top: 14px; color: #fff; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.cq-tuile:hover, .cq-tuile.hl, .cq-tuile:focus-visible { background: var(--cq-orange); border-color: var(--cq-orange); color: #fff; transform: translateY(-2px); }
.cq-tuile b { font-family: var(--cq-titre); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -0.02em; }
.cq-tuile span { font-size: 12px; line-height: 1.25; color: rgba(255,255,255,.84); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cq-tuile i { font-style: normal; margin-top: auto; padding-top: 4px; font-family: var(--cq-titre); font-weight: 700; font-size: 13px; color: var(--cq-orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq-tuile:hover i, .cq-tuile.hl i, .cq-tuile:hover span, .cq-tuile.hl span { color: #fff; }
.cq-tuile--nom { min-height: 96px; }
.cq-tuile--nom b { font-size: 22px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--rc, #DCE3EE); color: var(--cq-encre); }
.cq-planche--peu { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cq-planche--peu .cq-tuile { min-height: 110px; }

/* réglette servie par le serveur (codes NAF à 5 caractères) */
.cq-reglette--naf a { min-width: 64px; letter-spacing: .02em; }

/* ---------- fiches : variantes ---------- */
.fiche.hl { transform: translateY(-3px); box-shadow: 0 22px 34px -20px rgba(15,23,42,.45); border-color: var(--cq-encre-2); }
.fiche-bloc { min-width: 0; flex: 1 1 auto; }
.fiche-code { display: block; font-family: var(--cq-titre); font-weight: 900; font-size: 34px; line-height: 1; color: var(--cq-bleu); letter-spacing: -0.03em; margin-bottom: 6px; }
.fiche-pastille { flex: none; width: 54px; height: 54px; border-radius: 8px; background: var(--cq-bleu); color: #fff; font-family: var(--cq-titre); font-weight: 900; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.fiche-chiffres .premier b { color: var(--cq-orange-2); }
.fiche--trois .fiche-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiche-chiffres li.cache { display: none; }

/* ---------- textes des sections ---------- */
.cq-texte ul { margin: 0 0 14px; padding-left: 20px; }
.cq-texte li { margin: 0 0 6px; }
.cq-texte h3 { font-size: 18px; margin: 18px 0 8px; }
.cq-note { max-width: 70ch; margin: 18px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--cq-encre-2); background: linear-gradient(var(--cq-bleu), var(--cq-bleu)) left / 4px 100% no-repeat var(--cq-papier); border-radius: 6px; }

/* ---------- réactif ---------- */
@media (max-width: 991px) {
    .cq-planche { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; gap: 8px; padding: 4px 0 12px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; filter: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; }
    .cq-planche .cq-tuile { flex: 0 0 150px; scroll-snap-align: start; }
    .cq-planche--peu .cq-tuile { flex-basis: 190px; }
}
@media (max-width: 640px) {
    .fiche-code { font-size: 30px; }
    .fiche--trois .fiche-chiffres { grid-template-columns: 1fr 1fr; }
    .fiche-pastille { width: 46px; height: 46px; font-size: 26px; }
}