/* Voir plan "liens morts Packs/Collections" — mise en page propre à la
   vitrine collections (onglets de type de logement, en-tête de fiche
   collection) ; le reste (grille de cartes, filtres) hérite de
   project-style-budget.css déjà chargé sur ces pages. */

/* project-style-budget.css n'a jamais eu à réinitialiser color/text-decoration
   sur .collection-card : côté configurateur c'est un <label>, jamais un lien.
   Ici les cartes sont de vrais <a> (on consulte, on ne sélectionne pas) —
   sans ce reset le texte hérite du bleu souligné par défaut du navigateur. */
a.collection-card,
a.collection-card:hover {
  color: inherit;
  text-decoration: none;
}

/* Espace demandé par Katia entre la grille de types de logement et le
   bandeau CTA final (.cta-section) — les deux se touchaient (0px de gap),
   ni l'un ni l'autre n'ayant de marge de ce côté dans project-style-budget.css. */
.collections-grid-container {
  margin-bottom: 64px;
}

.housing-type-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px 0 8px;
}

.housing-type-tab {
  padding: 8px 20px;
  border: 1px solid var(--line, #dfd3c7);
  border-radius: 20px;
  color: var(--ink, #332820);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
}

.housing-type-tab:hover {
  border-color: var(--terra, #8a6248);
  color: var(--terra, #8a6248);
}

.housing-type-tab.active {
  background-color: var(--terra, #8a6248);
  border-color: var(--terra, #8a6248);
  color: #fff;
}

.collection-hero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 32px;
  flex-wrap: wrap;
}

.collection-hero-content {
  flex: 1;
  min-width: 280px;
}

.collection-hero-content h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.collection-description {
  color: #4e5d6b;
  margin-top: 12px;
}

.collection-hero-image {
  flex: 1;
  min-width: 280px;
  max-width: 480px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.collection-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  font-size: 14px;
  color: #4e5d6b;
}

.collection-features li {
  margin-bottom: 4px;
}

/* content-page.css pose Poppins sur body — voulu pour ses autres pages
   (pour-qui, faq, contact, packs... voir son propre commentaire), mais la
   maquette de CETTE page a bien la police système sur body (comme
   shop/home, déjà corrigés ce chantier — voir memory moltow_css_redesign,
   décision Poppins pas encore généralisée). Ce fichier CSS est partagé avec
   /collection/{slug} (qui, lui, doit garder Poppins pour l'instant, hors
   périmètre ici) — `body:has(#grille-collections)` cible donc UNIQUEMENT
   /styles-collections/{type} (id propre à sa grille), pas un simple `body`
   qui aurait aussi changé /collection/{slug} par effet de bord via ce même
   fichier partagé. body.logged-in/.logged-out (plutôt que `body` seul) bat
   par spécificité (0,1,1+1 attr :has > 0,0,1) sans dépendre de l'ordre de
   chargement réel des <link> (déjà vu ailleurs sur ce chantier que ça peut
   différer de l'ordre écrit dans Layout.astro). */
body.logged-in:has(#grille-collections),
body.logged-out:has(#grille-collections) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
   Vitrine /styles-collections/{type} — pixel-perfect sur moltow-08-2026/
   styles-collections/index.html. content-page.css porte déjà la base
   générique ul[data-cards] (y compris la variante carte-lien <a>, utilisée
   ici) ; les deltas ci-dessous sont portés depuis pack-landing.css (même
   système de carte "ambiance" que /packs/{type}), adaptés à des cartes
   cliquables en entier (<a>, pas <label>+radio) — voir plan "Pixel-perfect
   /styles-collections/{type}". Ce qui précède (.collection-hero* etc.) reste
   propre à /collection/{slug}, non touché. ===== */

main > section[aria-label='Introduction'] {
  text-align: center;
  padding-block: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
  background: linear-gradient(135deg, #f7f0e7 0%, #eee2d5 55%, #e7d7c8 100%);
}
main > section[aria-label='Introduction'] > hgroup {
  margin-bottom: 0.9rem;
}
main > section[aria-label='Introduction'] h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
}
main > section[aria-label='Introduction'] > hgroup > p {
  font-size: var(--step-0, 1rem);
  max-width: 46rem;
  margin-inline: auto;
}
main section > ul[data-badges] {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: center;
  padding: 0;
  margin: 1.6rem auto 0;
  max-width: 52rem;
  font-size: var(--step--1, 0.85rem);
  color: var(--ink-soft, #57483e);
  font-weight: 600;
}
main section > ul[data-badges] > li::before {
  content: '✓  ';
  color: var(--green, #3f7d5c);
  font-weight: 800;
}
@media (max-width: 760px) {
  main section[aria-label='Introduction'] {
    padding-block: 1.5rem 1.4rem !important;
  }
  main section[aria-label='Introduction'] [data-eyebrow] {
    display: none !important;
  }
  main section[aria-label='Introduction'] h1 {
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    line-height: 1.15;
    margin-bottom: 0.35em;
  }
  main section[aria-label='Introduction'] hgroup > p:last-of-type {
    font-size: 0.93rem;
    line-height: 1.45;
  }
}

/* Grille 3/2/1 colonnes (au lieu de l'auto-fit générique de content-page.css) */
main section#grille-collections {
  padding-top: 1.6rem;
}
main section#grille-collections > ul[data-cards] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 64rem) {
  main section#grille-collections > ul[data-cards] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  main section#grille-collections > ul[data-cards] {
    grid-template-columns: 1fr;
  }
}
main section#grille-collections > ul[data-cards] > li[hidden] {
  display: none;
}

/* Ruban ambiance sur la vignette */
main section#grille-collections ul[data-cards] figure > figcaption {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--terra, #8a6248);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin: 0;
}

/* Pastilles style/sol — remplace le "✓" générique de content-page.css
   (pensé pour une liste d'avantages), non voulu sur ces tags. */
main section#grille-collections ul[data-cards] article > ul[data-tags] {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 1.3rem 0.9rem;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
main section#grille-collections ul[data-cards] article > ul[data-tags] > li {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--ink-mute, #7b6d62);
  background: var(--bg-inset, #ebe1d5);
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
  white-space: nowrap;
}
main section#grille-collections ul[data-cards] article > ul[data-tags] > li::before {
  content: none;
}

/* Prix + stock */
main section#grille-collections ul[data-cards] article > p[data-price] {
  margin: 0.2rem 1.3rem 0.3rem;
  font-size: var(--step-0, 1rem);
  font-weight: 800;
  color: var(--terra, #8a6248);
}
main section#grille-collections ul[data-cards] article > p[data-price] small {
  color: var(--ink-mute, #7b6d62);
  font-weight: 600;
}
main section#grille-collections ul[data-cards] article > p[data-stock] {
  margin: 0 1.3rem 1.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--green, #3f7d5c);
}

/* Boutons "Choisir cette collection" / "Demander un devis" — présents dans
   la maquette (2 <a data-cta> en enfants directs de <article>) mais
   manquants au premier passage (carte entière transformée en <a>, plus
   pratique mais pas fidèle — repéré par Katia). [data-cta] n'a pas de style
   de base générique dans content-page.css (seulement la variante scopée au
   bandeau CTA final), donc porté ici tel que défini dans la maquette. */
[data-cta] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 999px;
  transition: 0.2s;
  border: 1.5px solid transparent;
  text-decoration: none;
}
[data-cta='primary'] {
  background: var(--terra, #8a6248);
  color: #fff;
}
[data-cta='primary']:hover {
  background: var(--terra-dark, #684735);
  transform: translateY(-1px);
}
[data-cta='ghost'] {
  border-color: var(--line, #dfd3c7);
  color: var(--ink, #332820);
}
[data-cta='ghost']:hover {
  border-color: var(--terra, #8a6248);
  color: var(--terra, #8a6248);
}
main section#grille-collections ul[data-cards] article > a[data-cta] {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  margin: 0 0 0.5rem 1.3rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
}
main section#grille-collections ul[data-cards] article > a[data-cta='ghost'] {
  margin-bottom: 1.2rem;
}

/* Phrase d'aide sous le CTA final — absente de content-page.css (pas
   présente dans les autres pages qui la chargent), lien tel: en blanc sur le
   fond terra du bandeau (sinon hérite du bleu legacy `a{color:#484fe3}`
   d'app.css, même piège que les h3 des cartes ci-dessus). */
main > section[aria-label="Appel à l'action"] > p[data-aide] {
  margin: 1.6rem auto 0;
  font-size: var(--step--1, 0.85rem);
  color: rgba(255, 255, 255, 0.85);
}
main > section[aria-label="Appel à l'action"] > p[data-aide] a {
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
}

/* Filtres sol / style (barre inline au-dessus de la grille) */
#filtres-collections {
  max-width: var(--measure, 1180px);
  margin: 0 auto 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.9rem 1.2rem;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dfd3c7);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm, 0 4px 16px rgba(23, 24, 74, 0.07));
  padding: 1.1rem 1.3rem;
}
#filtres-collections label {
  margin: 0;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #57483e);
}
#filtres-collections select {
  width: auto;
  min-width: 12rem;
  margin-top: 0.3rem;
  display: block;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line, #dfd3c7);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--ink, #332820);
  font: inherit;
}
#filtres-collections button {
  font: inherit;
  font-size: var(--step--1, 0.85rem);
  font-weight: 700;
  color: var(--terra, #8a6248);
  background: none;
  border: 1.5px solid var(--line, #dfd3c7);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: 0.2s;
}
#filtres-collections button:hover {
  border-color: var(--terra, #8a6248);
}
#filtres-collections output {
  margin-inline-start: auto;
  font-weight: 800;
  font-size: var(--step--1, 0.85rem);
  color: var(--ink-soft, #57483e);
}
@media (max-width: 47.5rem) {
  #filtres-collections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1rem 1rem 1.1rem;
  }
  #filtres-collections select {
    width: 100%;
    min-width: 0;
  }
  #filtres-collections button,
  #filtres-collections output {
    justify-self: center;
  }
}