/* ==========================================================================
   Section: Services grid  ([rimas_services_plombier] and future variants)
   "Fiche technique" grid: hairline rules, no shadows, accent icon tiles.
   ========================================================================== */
.rsvcs{background:var(--paper);color:var(--tx);padding-block:var(--sec)}

/* Head: eyebrow + H2 left, lead right */
.rsvcs__head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem clamp(2rem,4vw,5rem);
  align-items:end;margin-bottom:clamp(2.25rem,1.4rem + 2.6vw,3.75rem);
}
.rsvcs__head .eyebrow{margin-bottom:1.1rem}
.rsvcs__title{
  font-size:var(--t-h2);font-weight:800;line-height:.98;letter-spacing:-.022em;
  font-stretch:96%;text-wrap:balance;color:var(--tx);
}
.rsvcs__lead{font-size:var(--t-lead);line-height:1.5;color:var(--tx-mute);max-width:52ch;text-wrap:pretty;padding-bottom:.35rem}

/* Grid of cards separated by 1px rules */
.rsvcs__grid{
  --cols:4;
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  /* Cards draw their own hairline into the 1px gap, so a short last row
     leaves paper rather than a grey block. */
  gap:1px;background:var(--paper);border:2px solid var(--rule-2);
}
.rsvc{
  --pad:clamp(1.35rem,1.1rem + 1vw,1.85rem);
  display:flex;flex-direction:column;gap:.9rem;
  background:var(--paper);padding:var(--pad);
  position:relative;box-shadow:0 0 0 1px var(--rule);
  transition:background .2s var(--ease);
}
.rsvc::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--signal);
  transition:height .25s var(--ease);
}
.rsvc:hover{background:#fff}
.rsvc:hover::before{height:100%}

/* Photo variant: the image spans the full card width, icon tile overlapping its
   bottom-left corner. A small left-aligned thumbnail left dead space to its
   right once the grid moved to four columns. */
.rsvc--photo{padding-top:0}
.rsvc__media{
  margin:0 calc(-1 * var(--pad));
  aspect-ratio:16 / 10;overflow:hidden;background:var(--paper-2);
}
.rsvc__media picture,.rsvc__media img{width:100%;height:100%}
.rsvc__img{object-fit:cover;object-position:50% 40%;transition:transform .6s var(--ease)}
.rsvc--photo:hover .rsvc__img{transform:scale(1.04)}
.rsvc--photo .rsvc__icon{
  position:relative;z-index:1;margin:-1.65rem 0 .35rem;
  width:2.9rem;height:2.9rem;box-shadow:0 0 0 4px var(--paper);
}
.rsvc--photo .rsvc__icon svg{width:1.45rem;height:1.45rem}
.rsvc--photo:hover .rsvc__icon{box-shadow:0 0 0 4px #fff}
.rsvc__body{display:flex;flex-direction:column;gap:.7rem;flex:1}

.rsvc__icon{
  width:3.5rem;height:3.5rem;display:grid;place-items:center;
  background:var(--accent);color:#fff;margin-bottom:.35rem;
  position:relative;/* the photo card's icon is offset onto the thumbnail; .rsvc is the containing block */
}
.rsvc__icon svg{width:1.75rem;height:1.75rem}
.rsvc__title{
  font-size:clamp(1.1rem,1rem + .5vw,1.3rem);font-weight:700;line-height:1.18;letter-spacing:-.012em;
  text-wrap:balance;color:var(--tx);
}
.rsvc__text{font-size:var(--t-xs);line-height:1.55;color:var(--tx-mute);text-wrap:pretty;flex:1}
.rsvc__body .rsvc__text{flex:1}
.rsvc__link{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.01em;color:var(--accent);
  padding-bottom:.15rem;border-bottom:2px solid transparent;
  transition:border-color .18s var(--ease),gap .18s var(--ease);
}
.rsvc__link svg{flex:none;transition:transform .18s var(--ease)}
.rsvc__link:hover{border-color:var(--accent);gap:.7rem}
.rsvc__link:hover svg{transform:translateX(2px)}

/* CTA as a wide cell inside the grid (fills the empty end of the last row) */
.rsvc--cta{
  grid-column:span var(--span,2);
  background:var(--ink);color:var(--tx-inv);
  display:flex;flex-direction:column;justify-content:center;gap:1.25rem;
}
.rsvc--cta::before{width:6px;height:100%!important;background:var(--signal)}
.rsvc--cta:hover{background:var(--ink)}
.rsvc--cta .rsvcs__cta-title{font-size:var(--t-h3);font-weight:800;line-height:1.15;letter-spacing:-.014em;text-wrap:balance}
.rsvc--cta .rsvcs__cta-text{font-size:var(--t-sm);color:var(--tx-inv-mute);margin-top:.5rem;max-width:48ch;text-wrap:pretty}
.rsvc--cta .rsvcs__cta-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* Dark CTA band */
.rsvcs__cta{
  margin-top:clamp(2rem,1.4rem + 2vw,3rem);
  background:var(--ink);color:var(--tx-inv);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem clamp(2rem,4vw,4rem);
  align-items:center;padding:clamp(1.75rem,1.3rem + 1.8vw,2.75rem) clamp(1.5rem,1.2rem + 1.6vw,2.75rem);
  position:relative;overflow:hidden;
}
.rsvcs__cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--signal)}
.rsvcs__cta-title{font-size:var(--t-h3);font-weight:800;line-height:1.15;letter-spacing:-.014em;text-wrap:balance}
.rsvcs__cta-text{font-size:var(--t-sm);color:var(--tx-inv-mute);margin-top:.5rem;max-width:56ch;text-wrap:pretty}
.rsvcs__cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:flex-end}

@media (max-width:1180px){
  .rsvcs__grid{grid-template-columns:repeat(min(var(--cols),3),minmax(0,1fr))}
  .rsvc--cta{grid-column:1 / -1}
}
@media (max-width:900px){
  .rsvcs__grid{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}
}
@media (max-width:860px){
  .rsvcs__head{grid-template-columns:1fr;align-items:start}
  .rsvcs__cta{grid-template-columns:1fr}
  .rsvcs__cta-actions{justify-content:flex-start}
}
@media (max-width:600px){
  .rsvcs__grid{grid-template-columns:1fr}
  .rsvcs__cta-actions .rbtn{width:100%}
  /* Phone: separate cards; image column beside the text, both the same height */
  .rsvcs__grid{gap:.75rem;background:transparent;border:0}
  .rsvc{border:2px solid var(--rule-2);box-shadow:none;--pad:1.1rem}
  .rsvc--photo{
    --thumb:6.75rem;padding-top:var(--pad);
    display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);
    column-gap:1rem;align-items:stretch;
  }
  .rsvc--photo .rsvc__media{
    grid-column:1;grid-row:1;width:var(--thumb);height:auto;
    aspect-ratio:auto;align-self:stretch;margin:0;
  }
  .rsvc--photo .rsvc__img{object-position:50% 45%}
  .rsvc--photo .rsvc__icon{
    position:absolute;margin:0;width:2rem;height:2rem;box-shadow:0 0 0 3px var(--paper);
    left:calc(var(--pad) + var(--thumb) - 1rem);top:auto;bottom:var(--pad);
  }
  .rsvc--photo .rsvc__icon svg{width:1rem;height:1rem}
  .rsvc--photo .rsvc__icon svg{width:1rem;height:1rem}
  .rsvc--photo .rsvc__body{grid-column:2;grid-row:1;margin-top:0;gap:.55rem;padding-left:.4rem}
  .rsvc--photo .rsvc__link{display:inline;white-space:normal;font-size:.75rem;line-height:1.5}
  .rsvc--photo .rsvc__link svg{display:inline;vertical-align:-.15em;margin-left:.3rem}
  .rsvc--photo::before{display:none}
  .rsvc--cta{padding:var(--pad) var(--pad) var(--pad) calc(var(--pad) + 6px)}
}