/* Nos services */

/* Intro ------------------------------------------------------------------ */
.svc-intro { background: var(--ivoire); padding-block: clamp(32px, 4vw, 48px) clamp(56px, 6vw, 96px); }
.svc-intro__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(40px, 5vw, 64px); }
.svc-intro__left { display: grid; gap: 28px; }
.svc-intro__title { font-size: clamp(38px, 4.7vw, 68px); }
.svc-intro__right { display: grid; gap: 28px; }
.svc-intro__right .lead { font-size: 17px; }
.svc-summary { border-top: 1px solid var(--ligne); }
.svc-summary a { display: flex; align-items: center; gap: 18px; padding-block: 12px; border-bottom: 1px solid var(--ligne); transition: padding var(--t) var(--ease); }
.svc-summary a:hover { padding-left: 8px; }
.svc-summary__index { font-family: var(--font-mono); font-size: 11px; color: var(--laiton-encre); }
.svc-summary__label { flex: 1; font-family: var(--font-titre); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.svc-summary .icon { color: var(--laiton-encre); transition: transform var(--t) var(--ease); }
.svc-summary a:hover .icon { transform: rotate(90deg) translateX(3px) !important; }
.svc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1.5px solid var(--nuit); }
.svc-facts > div { display: grid; align-content: start; gap: 10px; }
.svc-facts dt { font-size: 10px; }
.svc-facts dd { font-family: var(--font-titre); font-size: 19px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.svc-facts dd.svc-facts__aut { font-family: var(--font-texte); font-size: 14px; letter-spacing: 0; }
@media (max-width: 1023px) {
  .svc-intro__grid { grid-template-columns: 1fr; align-items: start; }
  .svc-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 499px) { .svc-facts { grid-template-columns: 1fr; gap: 18px; } }

/* 01 — Présence humaine --------------------------------------------------- */
.svc-head { padding-bottom: clamp(32px, 4vw, 40px); border-bottom: 1px solid var(--ligne); }
.svc-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4.4vw, 64px); align-items: center; }
.svc-main__media { display: block; aspect-ratio: 740 / 500; }
.svc-main__body { display: grid; justify-items: start; gap: 24px; }
.svc-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.svc-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.svc-pills > span { padding: 5px 9px; border: 1px solid var(--ligne); border-radius: var(--radius); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.svc-pills--dark > span { border-color: var(--ligne-sombre); color: var(--texte-inverse-2); }
.svc-need { display: grid; gap: 8px; padding-left: 16px; border-left: 1.5px solid var(--laiton); }
.svc-need p:last-child { font-size: 16px; line-height: 1.6; color: var(--nuit); }
.svc-need--dark p:last-child { color: var(--ivoire); }

.svc-pair { display: grid; grid-template-columns: 1.76fr 1fr; gap: clamp(32px, 4.4vw, 64px); align-items: start; margin-top: clamp(56px, 4.4vw, 64px); }
.svc-card { display: grid; justify-items: start; gap: 16px; scroll-margin-top: calc(var(--header-h) + 32px); }
.svc-card__media { width: 100%; aspect-ratio: 776 / 380; margin-bottom: 8px; }
.svc-card--offset { margin-top: 120px; }
.svc-card--offset .svc-card__media { aspect-ratio: 440 / 300; }
.svc-card .text { max-width: 62ch; }
.svc-card:target .h4, .svc-card:target .svc-card__head .mono--laiton { color: var(--laiton-encre); }
@media (max-width: 1023px) {
  .svc-main, .svc-pair { grid-template-columns: 1fr; }
  .svc-card--offset { margin-top: 0; }
}

/* 02 — Sécurité incendie ---------------------------------------------------- */
.svc-fire { display: grid; grid-template-columns: 560px 1fr; gap: clamp(40px, 5.6vw, 80px); align-items: start; }
.svc-fire__media { aspect-ratio: 560 / 820; position: sticky; top: calc(var(--header-h) + 32px); }
.svc-fire__body { display: grid; justify-items: start; gap: 24px; }
.svc-missions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; width: 100%; margin-bottom: 16px; }
.svc-missions li { display: grid; align-content: start; gap: 8px; padding-block: 28px 32px; border-top: 1px solid var(--ligne-sombre); }
.svc-missions p { font-size: 14px; line-height: 1.65; color: var(--texte-inverse-2); }
@media (max-width: 1100px) { .svc-fire { grid-template-columns: 1fr 1.2fr; } }
@media (max-width: 899px) {
  .svc-fire { grid-template-columns: 1fr; }
  .svc-fire__media { position: static; aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) { .svc-missions { grid-template-columns: 1fr; } }

/* 03 — Orientation -------------------------------------------------------------- */
.svc-orient { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 7vw, 108px); align-items: start; }
.svc-orient__intro { display: grid; justify-items: start; gap: 28px; position: sticky; top: calc(var(--header-h) + 40px); }
.svc-orient__title { font-size: clamp(34px, 3.4vw, 48px); }
.svc-orient__actions { display: grid; justify-items: start; gap: 16px; }
.svc-orient__phone { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.svc-orient__phone .icon { color: var(--laiton-encre); }
.svc-orient__phone:hover .icon { animation: ring 700ms var(--ease); }
.svc-situations { border-top: 1.5px solid var(--nuit); }
.situation { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--ligne); isolation: isolate; }
.situation::before { content: ''; position: absolute; inset: 0 -16px; z-index: -1; background: var(--ivoire); transform: scaleY(0); transform-origin: bottom; transition: transform 480ms var(--ease); }
.situation:hover::before, .situation:focus-visible::before { transform: scaleY(1); }
.situation__text { font-size: 15px; line-height: 1.55; max-width: 46ch; }
.situation__answer { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; text-align: right; }
.situation__answer .icon { color: var(--laiton-encre); transition: transform var(--t) var(--ease); }
.situation:hover .situation__answer .icon { transform: translateX(4px); }
@media (max-width: 1023px) {
  .svc-orient { grid-template-columns: 1fr; }
  .svc-orient__intro { position: static; }
}
@media (max-width: 599px) {
  .situation { grid-template-columns: 26px 1fr; gap: 8px 12px; padding: 20px 0; }
  .situation__answer { grid-column: 2; text-align: left; }
}

/* Technologies ---------------------------------------------------------------------- */
.svc-tech { background: var(--pierre); padding-bottom: clamp(56px, 6vw, 88px); }
.svc-tech__inner { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--ligne); scroll-margin-top: calc(var(--header-h) + 32px); }
.svc-tech__title { font-family: var(--font-texte); font-size: 15px; font-weight: 600; }
.svc-tech .link { margin-left: auto; }
@media (max-width: 599px) { .svc-tech .link { margin-left: 0; } }

/* 04 — Moyens opérationnels ------------------------------------------------------------ */
.svc-means { position: relative; display: flex; align-items: flex-end; min-height: 620px; overflow: hidden; background: var(--nuit); isolation: isolate; }
.svc-means__bg { position: absolute; inset: 0; z-index: -1; }
.svc-means__bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-means__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 32, .45) 0%, rgba(11, 18, 32, .92) 100%), linear-gradient(90deg, rgba(11, 18, 32, .7), rgba(11, 18, 32, 0) 70%); }
.svc-means__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-block: 80px; }
.svc-means__copy { display: grid; gap: 24px; max-width: 640px; }
@media (max-width: 767px) {
  .svc-means { min-height: 520px; }
  .svc-means__inner { flex-direction: column; align-items: flex-start; padding-block: 56px; }
}