/* ============================================================
   franco-media.com - hub pages, "Nos clients" and "Articles" sections.
   TASK-N40 (C1, ruling HI3). Loaded on the hub pages only (the page IDs of the
   hub column of inc/rubriques.php). The article cards (.cards, .card, .excerpt) come
   from blog-listing.css, enqueued on the hubs too; the FAQ from shared-components.css.
   Existing tokens only, no !important.
   ============================================================ */

.hubsec{ margin-top:var(--space-13); }
.hubsec h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2);
  line-height:var(--lh-h2);
  color:var(--os-heading);
}
.pcards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
  margin-top:22px;
}
.pcard{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.pcard, .pcard:hover, .pcard:focus{ text-decoration:none; }
.pcard:hover{ box-shadow:var(--shadow-floating); transform:translateY(-2px); }
.pcard .ph{ aspect-ratio:16 / 10; background:var(--os-sunken); overflow:hidden; }
.pcard .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.pcard h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.pcard p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.hub-articles .cards{ margin-top:22px; }
.hubsec .more{ margin:22px 0 0; }
.hubsec .more a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  color:var(--os-link);
  text-decoration:none;
}
.hubsec .more a:hover{ color:var(--os-link-hover); text-decoration:underline; text-underline-offset:3px; }
.hubsec .more svg{ stroke:currentColor; display:block; }
.hubsec .more a:focus-visible{ outline:3px solid var(--os-dark-teal); outline-offset:3px; }

@media (max-width:768px){
  .hubsec{ margin-top:var(--space-12); }
  .pcards{ grid-template-columns:1fr; gap:14px; }
}

/* ============================================================
   TASK-N40e (2.3, ruling Brain 21-10-2026): the text band to the rates page at the
   foot of every hub, after the FAQ. Same markup as the home band
   (gpcf_rates_band()). The rules are the home.css ones, scoped to
   .ratesband-sect because home.css is not loaded on the hubs. Existing tokens only.
   ============================================================ */

.ratesband-sect{ padding:56px 0 56px; }
.ratesband-sect .ratesband{
  background:var(--os-band);
  border-radius:var(--radius-band);
  padding:36px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.ratesband-sect .eyebrow{
  margin:0 0 6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--on-dark-hero-sub);
}
.ratesband-sect .ratesband h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-section-h2);
  line-height:1.15;
  color:var(--on-dark);
}
.ratesband-sect .ratesband p:not(.eyebrow){
  margin:10px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--on-dark-hero-sub);
  max-width:54ch;
}
.ratesband-sect .ratesband .btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-sizing:border-box;
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:18px;
  line-height:1.2;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease);
}
.ratesband-sect .ratesband .btn:hover{ background:var(--os-cta-hover); }
.ratesband-sect .ratesband .btn svg{ stroke:currentColor; display:block; }
.ratesband-sect .ratesband .btn:focus-visible{ outline:3px solid var(--on-dark); outline-offset:3px; }

@media (max-width:768px){
  .ratesband-sect{ padding:34px 0 34px; }
  .ratesband-sect .ratesband{ flex-direction:column; align-items:flex-start; padding:26px 20px; gap:20px; }
  .ratesband-sect .ratesband .btn{ width:100%; min-height:var(--tap-comfortable); white-space:normal; }
}