/* ---------- Shared styles for the 5 "pôle" service pages ----------
   Loaded *after* style.css. Reuses existing classes/variables from
   style.css wherever possible (.hero, .real, .real-card, .contact,
   .reveal, .magnetic, .hl…) — this file only adds what doesn't already
   exist: breadcrumb, FAQ accordion, and a couple of small layout tweaks. */

.hl{ color:var(--orange); }

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.04em; color:var(--gris);
  margin-bottom:22px;
}
.breadcrumb a{ color:var(--gris); text-decoration:none; transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--orange); }
.breadcrumb span[aria-current]{ color:var(--creme); }

/* ---------- single-card réalisations grid (no carousel needed) ---------- */
.real-grid--single{ max-width:420px; margin:0 auto; }

/* intro (title + paragraph) above the prestations scroll-jack — same
   horizontal rhythm as .real but lighter bottom padding, since the
   pinned panels follow immediately after instead of a card grid */
.prestations-intro{ padding:100px var(--pad) 20px; }

/* ---------- prestations scroll-jack ----------
   Same pin + vertical-scroll-drives-horizontal-slide mechanic as the
   homepage's "Nos services" pôles section (.poles-wrap/.poles-sticky/
   .poles-track, generic multi-instance in main.js) — reused here as-is,
   just with card-grid panels (.prestations-panel) instead of the big
   hero-style .pole-panel. Height (N panels × 100vh) is set inline per
   page since the panel count varies by pôle. */
.prestations-panel{
  min-width:100vw; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad);
}
.prestations-panel .real-grid{ width:100%; max-width:1360px; }
.prestations-panel .real-grid.real-grid--single{ max-width:420px; margin:0 auto; }

/* narrow viewports: the grid collapses to a single column, and 4 full
   cards stacked vertically don't fit inside the fixed 100vh pinned panel
   (overflow:hidden on .poles-sticky would clip cards 3-4). Switch to a
   horizontal swipeable strip *within* the panel instead — same scroll-snap
   pattern the homepage's réalisations carousels already use — while the
   vertical page-scroll still drives which group of cards is shown. */
@media(max-width:720px){
  .prestations-panel .real-grid{
    display:flex; flex-wrap:nowrap; align-items:stretch; gap:24px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .prestations-panel .real-grid::-webkit-scrollbar{ display:none; }
  .prestations-panel .real-grid .real-card{ flex:0 0 85%; scroll-snap-align:start; min-width:0; }
}

@media(prefers-reduced-motion:reduce){
  .prestations-panel{ min-width:0; height:auto; padding:40px var(--pad); }
  .prestations-panel + .prestations-panel{ border-top:1px solid var(--line); }
  .prestations-panel .real-grid{ display:grid; overflow-x:visible; }
}

/* override the default object-position:top on .real-card photos, for images
   that read better centered (e.g. a storefront where the sign isn't at the
   very top of the frame) */
.real-card .ph.is-centered img{ object-position:center; }

/* ---------- FAQ ---------- */
.faq{ padding:20px var(--pad) 140px; }
.faq-list{
  max-width:820px; margin-top:44px;
  display:flex; flex-direction:column; gap:14px;
}
.faq-item{
  background:var(--noir-2); border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-weight:600; font-size:1rem; color:var(--creme);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; line-height:1; color:var(--orange);
  transition:transform .25s ease; flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item-body{ padding:0 26px 24px; color:var(--gris); font-size:.95rem; line-height:1.65; max-width:70ch; }
@media(max-width:600px){
  .faq-item summary{ padding:18px 20px; font-size:.95rem; }
  .faq-item-body{ padding:0 20px 20px; }
}