/* ============================================================
   SERVICES — page listing + détail
   ============================================================ */

/* ---------- Hero listing ---------- */
.services-hero{
  min-height:100vh; display:flex; align-items:center;
  padding: clamp(8rem,14vw,11rem) 0 3rem;
  background: linear-gradient(155deg, var(--creme) 0%, var(--sage-light) 60%, var(--sage) 100%);
  position:relative; overflow:hidden;
}
.services-hero .container{ position:relative; z-index:2; }
.services-hero h1{ font-size: clamp(2.2rem, 5.5vw, 4.8rem); font-weight:800; line-height:1.05; margin:.6rem 0 0; letter-spacing:-.02em; max-width:100%; }
.services-hero p{ font-size: var(--fs-lead); color: rgba(60,60,59,.65); max-width:75%; margin-top:1.4rem; }

/* ---------- Grille de cartes ---------- */
.service-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  padding: clamp(5rem,9vw,9rem) 0 4rem;
}
.service-card{
  position:relative; height: 420px; border-radius: 28px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center;
  transform: translateY(0) perspective(900px) rotateX(0) rotateY(0);
  transition: transform .2s var(--ease-soft), box-shadow .4s var(--ease);
  box-shadow: 0 14px 30px rgba(60,60,59,.08);
}
.service-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(22,22,21,.05) 0%, rgba(22,22,21,.82) 100%);
  transition: background .45s var(--ease);
}
.service-card:hover{
  transform: translateY(-14px) perspective(900px) rotateX(2deg) rotateY(-2deg) scale(1.015);
  box-shadow: 0 30px 50px rgba(60,60,59,.22);
}
.service-card:hover::before{ background: linear-gradient(180deg, rgba(163,171,146,.18) 0%, rgba(22,22,21,.88) 100%); }
.service-card.service-card-pale::before{ background: linear-gradient(180deg, rgba(22,22,21,.32) 0%, rgba(22,22,21,.78) 45%, rgba(22,22,21,.95) 100%); }
.service-card.service-card-pale:hover::before{ background: linear-gradient(180deg, rgba(163,171,146,.3) 0%, rgba(22,22,21,.82) 45%, rgba(22,22,21,.96) 100%); }
.service-card-body{ position:relative; z-index:2; padding: 1.8rem 1.8rem 2rem; color:#fff; }
.service-card .num{ font-size:.78rem; letter-spacing:.2em; color: var(--sage-light); font-weight:700; }
.service-card h3{ font-size: 1.7rem; font-weight:700; margin:.6rem 0 0; letter-spacing:-.01em; }
.service-card .more{
  display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.84rem; font-weight:600;
  opacity:0; transform: translateY(8px); transition: all .4s var(--ease); color: var(--sage-light);
}
.service-card:hover .more{ opacity:1; transform:none; }

/* ---------- CTA bloc (split-screen 50/50) ---------- */
.services-cta{
  background: var(--sage); color: var(--anthracite); overflow:hidden; position:relative;
}
.services-cta .container{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.services-cta-text{ text-align:left; }
.services-cta h2{ font-size: var(--fs-h1); font-weight:800; letter-spacing:-.02em; max-width:14ch; line-height:1; }
.services-cta p{ margin: 1.4rem 0 2.2rem; max-width:480px; font-size: var(--fs-lead); color: rgba(22,22,21,.7); }
.services-cta .btn{ border-color: var(--anthracite); }
.services-cta .btn:hover{ background: var(--anthracite); }

/* ---------- Lien "Prendre rendez-vous" ---------- */
.rdv-link{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color: var(--anthracite);
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
}
.rdv-text{
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1.5px; text-decoration-color: var(--anthracite);
  background: linear-gradient(90deg,
    var(--anthracite) 0%,
    var(--anthracite) 30%,
    var(--sage-light) 50%,
    var(--anthracite) 70%,
    var(--anthracite) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: sweepGreen 3s ease-in-out infinite;
}
.rdv-arrow{ color: var(--anthracite); }
@keyframes sweepGreen{
  0%   { background-position: 100% center; }
  100% { background-position: -50% center; }
}
.services-cta-photo{ border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/5; }
.services-cta-photo img{ width:100%; height:100%; object-fit:cover; }
.cta-orb{
  position:absolute; width:480px; height:480px; border-radius:50%;
  background: rgba(247,246,242,.35); filter: blur(10px);
  top:-220px; right:-160px; pointer-events:none;
}

/* ============================================================
   PAGE DÉTAIL SERVICE
   ============================================================ */
.service-detail-hero{
  position:relative; min-height: max(64vh, 440px); display:flex; align-items:flex-end;
  background-size:cover; background-position:center; overflow:hidden;
}
.service-detail-hero::before{
  content:''; position:absolute; inset:-30px; z-index:0;
  background-image:inherit; background-size:cover; background-position:center;
  filter: blur(10px);
}
.service-detail-hero::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(22,22,21,.25), rgba(22,22,21,.85)); }
.service-detail-hero .container{ position:relative; z-index:2; padding: 7rem 6vw 3.4rem; }
.service-detail-hero .tag{ color: var(--sage-light); }
.service-detail-hero .tag::before{ background: var(--sage-light); }
/* max-width:16ch intentionnel sur desktop uniquement — écrasé par max-width:100% dans le bloc mobile */
.service-detail-hero h1{ color:#fff; font-size: var(--fs-h1); font-weight:800; margin:.6rem 0 0; max-width:16ch; line-height:1.02; letter-spacing:-.02em; }
.service-detail-hero .detail-subtitle{ color: var(--sage-light); font-size:1.1rem; font-weight:600; margin-top:1rem; max-width:100%; }
.back-link{ display:inline-flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.75); font-size:.88rem; margin-bottom:1.6rem; transition: color .3s, transform .3s; }
.back-link:hover{ color:#fff; transform: translateX(-4px); }

.detail-body{ padding-top: clamp(4rem,7vw,6.5rem); padding-bottom: clamp(4rem,7vw,6.5rem); }
.detail-flow{ max-width: 1040px; }
.detail-lead{ font-size:1rem; font-weight:700; color: var(--anthracite); line-height:1.85; margin-bottom:1.6rem; max-width:760px; }
.detail-body p{ font-size:1rem; color: rgba(60,60,59,.78); line-height:1.85; margin-bottom:1.2rem; }
.detail-sub{ font-size:.78rem; text-transform:uppercase; letter-spacing:.2em; color: var(--sage-dark); font-weight:700; margin: 2.2rem 0 1rem; }

.detail-domains{ display:flex; flex-direction:column; gap:1.1rem; margin: .5rem 0 0; }
.domain-item{
  padding:1.8rem 2.4rem; border-radius:18px; width:100%;
  background: rgba(163,171,146,.08); border:1px solid rgba(163,171,146,.25);
}
.domain-item h4{ font-size:1rem; font-weight:700; color: var(--anthracite); margin:0 0 .5rem; }
.domain-item p{ font-size:1rem; margin:0; color: rgba(60,60,59,.78); line-height:1.7; }

.detail-other{ background: var(--anthracite); color:#fff; padding: 4.5rem 0; }
.detail-other h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.2em; color: var(--sage-light); margin-bottom:2rem; }
.other-links{ display:flex; flex-wrap:wrap; gap:2rem 2.6rem; }
.other-links a{
  position:relative; font-size:1rem; font-weight:600; padding-bottom:.3rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
  overflow:hidden;
}
.other-links a::before{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background: var(--sage-light); transform: translateX(-100%); transition: transform .45s var(--ease);
}
.other-links a:hover{ color: var(--sage-light); }
.other-links a:hover::before{ transform: translateX(0); }

/* ---- Zone de contenu éditable via WordPress ---- */
.detail-content { max-width: 1040px; }
.detail-content > p:first-child {
  font-size: 1rem; font-weight: 700; color: var(--anthracite);
  line-height: 1.85; margin-bottom: 2.2rem; max-width: 760px;
}
.detail-content p { font-size: 1rem; color: rgba(60,60,59,.78); line-height: 1.85; margin-bottom: 1.2rem; }
.detail-content h3 {
  font-size: 1rem; font-weight: 700; color: var(--anthracite);
  margin: 1.1rem 0 0;
  padding: 1.8rem 2.4rem 0.6rem;
  background: rgba(163,171,146,.08);
  border: 1px solid rgba(163,171,146,.25);
  border-radius: 18px 18px 0 0;
  border-bottom: none;
  line-height: 1.4;
}
.detail-content h3 + p {
  padding: 0 2.4rem 1.8rem;
  background: rgba(163,171,146,.08);
  border: 1px solid rgba(163,171,146,.25);
  border-top: none;
  border-radius: 0 0 18px 18px;
  margin: 0 0 0.2rem;
  font-size: 1rem; color: rgba(60,60,59,.78); line-height: 1.7;
}

/* ============================================================
   RESPONSIVE — media queries TOUJOURS après les règles de base
   pour garantir que les overrides mobiles l'emportent sur la cascade
   ============================================================ */

@media (max-width: 1000px){
  .service-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px){
  .domain-item{ padding:1.5rem 1.6rem; }
  .detail-content h3 { padding: 1.4rem 1.4rem 0.5rem; }
  .detail-content h3 + p { padding: 0 1.4rem 1.4rem; }
}

@media (max-width: 640px){
  /* --- Grille & cartes expertises --- */
  .service-grid{ grid-template-columns: repeat(2,1fr); gap:.9rem; }
  .service-card{ height:210px; min-width:0; }
  /* hyphens:none + word-break:normal = aucun mot coupé en milieu de caractère */
  .service-card h3{ font-size:.62rem; letter-spacing:0; hyphens:none; word-break:normal; overflow-wrap:normal; }
  .service-card .more{ display:none; }
  .service-card-body{ padding:.85rem .8rem .9rem; }
  .service-card .num{ font-size:.62rem; }

  /* --- Hero listing --- */
  .services-hero{ padding: clamp(6rem,12vw,9rem) 0 2rem; }
  .services-hero h1{ font-size: clamp(1.9rem, 7vw, 2.6rem); hyphens:none; word-break:normal; }
  .services-hero p{ max-width: 100%; font-size: var(--fs-lead); }

  /* --- CTA listing --- */
  .services-cta .container{ grid-template-columns:1fr; gap:1.4rem; }
  .services-cta-text{ text-align:center; }
  .services-cta-photo{ aspect-ratio:16/9; border-radius:18px; }
  .services-cta h2{ font-size: clamp(1.8rem, 6.5vw, 2.6rem); max-width:100%; }
  .services-cta p{ font-size: 1rem; }

  /* --- Hero détail ---
     max-width:100% écrase le max-width:16ch du bloc de base ci-dessus.
     Cette règle est APRÈS la règle de base dans le fichier → elle gagne. */
  .service-detail-hero .container{ padding: 5rem 2rem 2.2rem; }
  .service-detail-hero h1{ font-size: clamp(1.4rem, 6.5vw, 2.2rem); max-width:100%; hyphens:none; word-break:normal; overflow-wrap:normal; }
  .service-detail-hero .detail-subtitle{ font-size: 1.1rem; hyphens:none; }

  /* --- Corps de page détail --- */
  .detail-lead{ font-size:.64rem; }
  .detail-body{ padding: clamp(1.2rem,3.5vw,2rem) 2rem; }
  .detail-body p{ font-size:.64rem; line-height:1.55; }
  .detail-content > p:first-child{ font-size:.64rem; margin-bottom:.55rem; }

  /* --- Bulles domaines d'intervention --- */
  .detail-domains{ gap:.4rem; }
  .domain-item{ padding:.4rem .58rem; }
  .domain-item h4{ font-size:.64rem; margin-bottom:.1rem; }
  .domain-item p{ font-size:.64rem; line-height:1.45; }

  /* --- Bulles contenu (h3 + paragraphe) --- */
  .detail-content h3{ font-size:.64rem; padding:.44rem .68rem 0.18rem; }
  .detail-content h3 + p{ font-size:.64rem; padding: 0 .68rem .44rem; line-height:1.42; }

  /* --- Section "autres expertises" --- */
  .other-links{ gap:1rem; }
  .detail-other{ padding: 1.6rem 0; }
  .other-links a{ font-size:.82rem; }
}

@media (max-width: 420px){
  /* h1 géré par le clamp du bloc 640px — pas d'override nécessaire */
  .service-detail-hero .detail-subtitle{ font-size: 1.0rem; }
  .domain-item{ padding:.34rem .52rem; }
  .domain-item h4{ font-size:.64rem; }
  .domain-item p{ font-size:.64rem; }
  .detail-content h3{ font-size:.64rem; padding:.4rem .62rem .16rem; }
  .detail-content h3 + p{ font-size:.64rem; padding: 0 .62rem .4rem; }
}