/* ==========================================================================
   Pages services (page-service.php). Chargé seulement sur ces 5 pages,
   après css/style.css dont il reprend les variables et les composants
   (titres, barre-curseur, boutons, cartes de réalisations, FAQ).
   ========================================================================== */

/* ---------- En-tête de page : plan diagonal jaune à droite ---------- */
.service-tete {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--entete-h) + env(safe-area-inset-top) + clamp(56px, 8vw, 120px)) 0 clamp(64px, 8vw, 128px);
}
.service-tete::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  bottom: -10%;
  right: -4vw;
  width: 14vw;
  background: var(--jaune);
  transform: skewX(var(--angle));
}
.service-tete .conteneur > * { max-width: calc(100% - 10vw); }
.legal-fil a + a, .legal-fil span { margin-left: 2px; }
.service-titre { max-width: 13em; margin-top: 16px; font-size: clamp(2.6rem, 6vw, 5.75rem); }
.service-accroche {
  max-width: 34em;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  line-height: 1.5;
}
.service-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: clamp(28px, 3vw, 44px);
}

/* ---------- Bénéfices : filets jaunes, sans cartes ---------- */
.service-benefices { padding-bottom: var(--section); }
.service-benefices .titre--h2,
.service-autres .titre--h2 { margin-bottom: clamp(36px, 4.5vw, 72px); }
.benefices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(20px, 2.4vw, 40px);
}
.benefice { padding-top: 22px; border-top: 3px solid var(--jaune); }
.benefice__titre {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(1.375rem, 1.9vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.benefice__texte { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: var(--gris-texte); }

/* ---------- Références : section anthracite coupée en diagonale (.realisations) ---------- */
.service-refs__tete {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.service-refs__intro { max-width: 28em; color: #E4E4E4; }

.refs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 2.6vw, 44px) clamp(16px, 1.8vw, 28px);
  container-type: inline-size;
  --col: 31cqw;               /* largeur de la première carte, pour caler le plan sur son image */
}
.refs[data-n="1"] { --col: 100cqw; }
.refs[data-n="2"], .refs[data-n="4"], .refs[data-n="5"] { --col: 48cqw; }
/* Plan diagonal jaune qui déborde derrière l'image de la première carte (jamais sous le texte) */
.refs::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -4vw;
  top: -48px;
  width: 12%;
  height: calc(var(--col) * .62 + 40px);
  background: var(--jaune);
  transform: skewX(var(--angle));
  pointer-events: none;
}
.ref { position: relative; z-index: 1; min-width: 0; }
.ref .projet__desc { color: var(--gris-clair); }

/* 1 réalisation : grande carte seule */
.refs[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.refs[data-n="1"] .projet__titre { font-size: clamp(1.375rem, 1.8vw, 1.875rem); }
/* 2 ou 4 réalisations : 2 colonnes */
.refs[data-n="2"], .refs[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 5 réalisations : une carte XL (2 × 2) et 4 vignettes, comme le mur de l'accueil */
.refs[data-n="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.refs[data-n="5"] .ref:first-child { grid-column: span 2; grid-row: span 2; }
.refs[data-n="5"] .ref:first-child .projet__media { flex: 1 0 auto; }
.refs[data-n="5"] .ref:first-child .projet__titre { font-size: clamp(1.375rem, 1.8vw, 1.875rem); }

.service-refs__plus { margin-top: clamp(32px, 4vw, 56px); }
.service-refs .lien-souligne { color: var(--blanc); }
@media (hover: hover) {
  .service-refs .lien-souligne:hover { text-decoration-color: var(--blanc); }
}

/* ---------- Après la mise en ligne : plan jaune, curseur gris ---------- */
.service-suivi {
  position: relative;
  margin-top: calc(-1 * var(--coupe));
  padding-top: calc(var(--coupe) + var(--section) * .8);
  padding-bottom: calc(var(--section) * .8);
  background: var(--jaune);
  clip-path: polygon(0 var(--coupe), 100% 0, 100% 100%, 0 100%);
  --couleur-curseur: var(--gris);
}
.service-suivi__grille,
.service-cta__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px clamp(40px, 6vw, 112px);
  align-items: end;
}
.service-suivi__texte { max-width: 32em; margin-bottom: 12px; }
.service-suivi .lien-souligne { text-decoration-color: var(--anthracite); }
@media (hover: hover) {
  .service-suivi .lien-souligne:hover { text-decoration-color: var(--ocre); }
}

/* ---------- Liens vers les autres services ---------- */
.service-autres { padding-bottom: var(--section); }
.autres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 2.4vw, 40px);
}
.autre__lien {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--gris-filet);
  text-decoration: none;
  transition: border-color .3s var(--sortie);
}
.autre__nom {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(1.375rem, 1.9vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-color: var(--jaune);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.autre__role { font-weight: 600; font-size: 1.0625rem; color: var(--gris-texte); }
@media (hover: hover) {
  .autre__lien:hover { border-top-color: var(--jaune); }
  .autre__lien:hover .autre__nom { text-decoration-color: var(--anthracite); }
}

/* ---------- Appel à l'action ---------- */
.service-cta { padding-block: var(--section); background: var(--fond-alt); }
.service-cta__texte { max-width: 30em; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }
.service-cta .service-actions { margin-top: 28px; }

/* ---------- Tablette ---------- */
@media (max-width: 999px) {
  .service-tete .conteneur > * { max-width: none; }
  .service-tete .service-titre, .service-tete .legal-fil { max-width: calc(100% - 8vw); }
  .benefices, .autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-refs__tete,
  .service-suivi__grille,
  .service-cta__grille { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* 2 colonnes ; la première carte passe en pleine largeur quand le nombre est impair */
  .refs, .refs[data-n="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refs[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .refs[data-n="3"] .ref:first-child,
  .refs[data-n="5"] .ref:first-child { grid-column: 1 / -1; grid-row: auto; }
  .refs[data-n="5"] .ref:first-child .projet__media { flex: none; }
  .refs { --col: 48cqw; }
  .refs[data-n="1"], .refs[data-n="3"], .refs[data-n="5"] { --col: 100cqw; }
  .refs::before { width: 30%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  .service-tete { padding-top: calc(var(--entete-h) + env(safe-area-inset-top) + 36px); padding-bottom: 56px; }
  /* Plan court, à hauteur du titre : il ne passe pas sous l'accroche */
  .service-tete::before { top: calc(var(--entete-h) + 24px); bottom: auto; height: 190px; width: 20vw; right: -11vw; }
  .service-titre { margin-top: 8px; font-size: clamp(2.3rem, 10.6vw, 2.9rem); line-height: 1.02; }
  .service-accroche { font-size: 1.125rem; line-height: 1.55; }
  .service-actions { gap: 8px 24px; }

  .benefices, .autres { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .benefice { padding-top: 16px; }
  .benefice__titre, .autre__nom { font-size: 1.375rem; }
  .benefice__texte { margin-top: 8px; font-size: 1rem; }
  .autres { gap: 4px; }
  .autre__lien { padding-block: 16px 12px; }
  .autre__role { font-size: 1rem; }

  .service-refs__intro { font-size: 1.0625rem; }
  .refs { gap: 24px 14px; }
  .refs::before { left: -14vw; top: -20px; width: 40%; height: calc(var(--col) * .62 + 12px); }
  .ref .projet__titre { margin-top: 10px; font-size: 1.0625rem; line-height: 1.15; }
  .ref .projet__desc { margin-top: 2px; font-size: .9375rem; line-height: 1.35; }
  .refs[data-n="1"] .projet__titre,
  .refs[data-n="3"] .ref:first-child .projet__titre,
  .refs[data-n="5"] .ref:first-child .projet__titre { font-size: 1.375rem; }
  .refs[data-n="2"] .projet__badge, .refs[data-n="4"] .projet__badge, .refs[data-n="6"] .projet__badge,
  .refs .ref:not(:first-child) .projet__badge { padding: 3px 8px 3px 13px; font-size: .75rem; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%); }

  .service-suivi__texte { font-size: 1.0625rem; }
  .service-cta__texte { font-size: 1.0625rem; }
}