
.services{
  --brand:#FF5C31; --brand-text:#A92F12; --brand-light:#FF8A66;
  --ink:#172331; --muted:#576373; --night:#0B121B;
  font-family:Poppins,"Segoe UI",system-ui,sans-serif; color:var(--ink);
  padding-block:clamp(56px,8vw,112px);
}
html.theme-dark .services{--brand-text:#FF8A66;--ink:#F3F6FA;--muted:#BDC9D5}
.services__head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.services__eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text);margin:0}
.services__title{font-size:clamp(34px,4.2vw,58px);font-weight:500;line-height:1.05;letter-spacing:-.03em;margin:0;text-wrap:balance}
.services__title em{font-style:normal;color:var(--brand)}
.services__intro{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0}

.services__grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(300px,auto)}
.svc{display:flex;min-width:0}
.svc--audit{grid-column:span 2;grid-row:span 2}
.svc--train{grid-column:1 / -1}
@media (max-width:1020px){
  .services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc--audit{grid-row:span 1;min-height:420px}
}
@media (max-width:640px){
  .services__grid{grid-template-columns:minmax(0,1fr)}
  .svc--audit,.svc--train{grid-column:auto}
  .svc--audit{min-height:360px}
}

.svc__link{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:300px;border-radius:20px;background:var(--night);color:#fff;text-decoration:none;
  border:1px solid rgb(255 255 255 / .08);
  box-shadow:0 1px 0 rgb(255 255 255 / .04) inset;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease}
.svc__link::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, rgb(11 18 27 / .95) 0%, rgb(11 18 27 / .65) 38%, rgb(11 18 27 / 0) 70%)}
.svc-art{position:absolute;inset:0;width:100%;height:100%;z-index:-2;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.svc:not(.svc--audit):not(.svc--train) .svc-art{height:68%}
.svc--train .svc-art{left:auto;width:55%}
.svc--train .svc__link::after{background:linear-gradient(to right, rgb(11 18 27 / 1) 0%, rgb(11 18 27 / .9) 40%, rgb(11 18 27 / 0) 75%)}

.svc__tag{position:absolute;top:18px;left:18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svc__body{display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;max-width:46ch}
.svc--audit .svc__body{padding:36px 36px 32px}
.svc__title{font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0}
.svc--audit .svc__title{font-size:clamp(26px,2.6vw,34px)}
.svc__sub{font-size:15px;line-height:1.55;color:rgb(255 255 255 / .8)}
.svc--audit .svc__sub{font-size:17px}
.svc__cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:15px;font-weight:600;color:var(--brand-light)}
.svc__cta svg{width:18px;height:18px;transition:transform .3s ease}

.svc__link:hover,.svc__link:focus-visible{border-color:var(--brand);box-shadow:0 24px 50px rgb(11 18 27 / .28)}
.svc__link:hover .svc-art,.svc__link:focus-visible .svc-art{transform:scale(1.05)}
.svc__link:hover .svc__cta svg,.svc__link:focus-visible .svc__cta svg{transform:translateX(5px)}
.svc__link:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* micro-animations propres à chaque visuel */
.svc-art .lens{transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.svc__link:hover .lens,.svc__link:focus-visible .lens{transform:translate(-14px,10px)}
.svc-art .flow{animation:svc-flow 6s linear infinite;animation-play-state:paused}
.svc__link:hover .flow,.svc__link:focus-visible .flow{animation-play-state:running}
.svc-art .bar,.svc-art .step{transform-box:fill-box;transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc__link:hover .bar,.svc__link:focus-visible .bar{transform:scaleY(1.08)}
.svc__link:hover .step,.svc__link:focus-visible .step{transform:translateY(-6px)}
.svc-art .orbit{transform-box:fill-box;transform-origin:center;transition:transform 1.2s ease}
.svc__link:hover .orbit,.svc__link:focus-visible .orbit{transform:rotate(40deg)}
.svc-art .tick{stroke-dasharray:1;stroke-dashoffset:0}
.svc__link:hover .tick,.svc__link:focus-visible .tick{animation:svc-draw .7s ease both}
.svc__link:hover .node,.svc__link:focus-visible .node{animation:svc-pulse 1.4s ease-in-out infinite}
@keyframes svc-flow{to{stroke-dashoffset:-336}}
@keyframes svc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes svc-pulse{50%{opacity:1;r:4}}

@media (prefers-reduced-motion:reduce){
  .services *{transition:none!important;animation:none!important}
  .svc__link:hover .svc-art,.svc__link:hover .lens,.svc__link:hover .bar,.svc__link:hover .step,.svc__link:hover .orbit{transform:none}
}

/* Integration with the existing Mirador typography and motion controls. */
.services .svc__title,.services .svc__tag{color:#fff}
.services .svc__link{min-width:0}
.services .svc__body{position:relative;padding-top:80px}
.services .svc__tag{max-width:calc(100% - 36px);line-height:1.5}
.services{scroll-margin-top:100px}
@media(max-width:640px){
 .svc--train .svc-art{width:100%;opacity:.55}
 .svc--audit .svc__body{padding-inline:24px}
 .svc--train .svc__link::after{background:linear-gradient(to top,#0b121b 0%,rgb(11 18 27 / .8) 50%,transparent)}
}
@media(prefers-reduced-motion:reduce){
 .services .svc__link:focus-visible :is(.svc-art,.lens,.bar,.step,.orbit){transform:none}
}

/* V11.7: equal-size, white service cards in a horizontal carousel. */
.services{background:#fff;color:#172331;--ink:#172331;--muted:#576373;--brand-text:#a92f12}
html.theme-dark .services{--ink:#172331;--muted:#576373;--brand-text:#a92f12}
.services .services__title{color:#172331}
.services .services__grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#ff8a66 #f5f7fa;padding:8px 4px 24px;overscroll-behavior-x:contain}
.services .svc{flex:0 0 calc((100% - 48px)/3);height:490px;min-height:0;scroll-snap-align:start;scroll-snap-stop:always}
.services .svc__link{display:flex;justify-content:flex-end;background:#fff;border:1px solid #dce2e9;box-shadow:0 4px 18px rgb(23 35 49 / .04);border-radius:20px;transition:background .35s,border-color .35s,box-shadow .35s;min-height:0}
.services .svc__link::after{display:none}
.services .svc-art{inset:42px 0 auto;width:100%;height:220px;z-index:0;opacity:.95}
.services .svc-art>rect:first-of-type{fill:transparent}
.services .svc__body,.services .svc--audit .svc__body{z-index:1;padding:24px;max-width:none;min-height:224px;justify-content:flex-end}
.services .svc__title,.services .svc--audit .svc__title{color:#172331;font-size:23px;line-height:1.2}
.services .svc__sub,.services .svc--audit .svc__sub{color:#576373;font-size:15px;line-height:1.5}
.services .svc__tag{z-index:2;color:#a92f12;background:#fff3ee;border:1px solid #ffd2c4;letter-spacing:.06em;font-size:12px}
.services .svc__cta{color:#a92f12;margin-top:12px}
.services .svc__link:is(:hover,:focus-visible,:active),.services .svc.is-touched .svc__link{background:#fff0e9;border-color:#ff5c31;box-shadow:0 8px 24px rgb(169 47 18 / .12)}
.services .svc__link:is(:hover,:focus-visible) .svc__tag,.services .svc.is-touched .svc__tag{background:#ff5c31;color:#172331;border-color:#ff5c31}
.services__controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px}
.services__controls button{border:1px solid #dce2e9;border-radius:999px;background:#fff;color:#172331;padding:12px 18px;min-height:44px;cursor:pointer;font:inherit;transition:background .2s}
.services__controls button:hover{background:#fff0e9;border-color:#ff5c31}
.services__controls button:focus-visible{outline:3px solid #a92f12;outline-offset:3px}
@media(max-width:1100px){.services .svc{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.services .svc{flex-basis:90%;height:490px}.services .services__grid{gap:16px}.services .svc-art{opacity:.95;width:100%}.services__controls{justify-content:center}}
@media(prefers-reduced-motion:reduce){.services .svc__link{transition:none}}

.services .svc:not(.svc--audit):not(.svc--train) .svc-art{height:220px}

/* V11.8 — distinct Mirador accents and always-live illustrations. */
.services .svc--audit{--card-accent:#ff5c31;--card-text:#a92f12}
.services .svc--data{--card-accent:#00b9f1;--card-text:#006d8d}
.services .svc--bi{--card-accent:#f50083;--card-text:#ad005c}
.services .svc--gov{--card-accent:#ffa610;--card-text:#8b5200}
.services .svc--ia{--card-accent:#1674ff;--card-text:#1756ba}
.services .svc--train{--card-accent:#f1264f;--card-text:#b01435}
.services .svc__link{border-bottom:4px solid var(--card-accent)}
.services .svc__tag{color:var(--card-text);background:color-mix(in srgb,var(--card-accent) 9%,white);border-color:color-mix(in srgb,var(--card-accent) 30%,white)}
.services .svc__cta{color:var(--card-text)}
.services .svc__link:is(:hover,:focus-visible,:active),.services .svc.is-touched .svc__link{background:color-mix(in srgb,var(--card-accent) 9%,white);border-color:var(--card-accent);box-shadow:0 8px 24px color-mix(in srgb,var(--card-accent) 15%,transparent)}
.services .svc__link:is(:hover,:focus-visible) .svc__tag,.services .svc.is-touched .svc__tag{background:color-mix(in srgb,var(--card-accent) 18%,white);color:var(--card-text);border-color:var(--card-accent)}
.services .svc__link:focus-visible{outline-color:var(--card-text)}
.services__carousel{position:relative;padding-inline:32px}
.services__controls{margin-top:16px;justify-content:center}
.services__controls :is([data-services-prev],[data-services-next]){position:absolute;top:245px;transform:translateY(-50%);z-index:5;width:48px;height:48px;padding:0;background:#fff;box-shadow:0 4px 18px rgb(23 35 49 / .12);font-size:24px;border-color:#dce2e9}
.services__controls [data-services-prev]{left:0}
.services__controls [data-services-next]{right:0}
.services .svc-art{animation:svc-alive-float 6s ease-in-out infinite;transform-origin:center}
.services .svc:nth-child(2n) .svc-art{animation-delay:-3s}
.services .svc-art .lens{animation:svc-alive-lens 5s ease-in-out infinite}
.services .svc-art .flow{animation:svc-flow 6s linear infinite;animation-play-state:running}
.services .svc-art .bar{animation:svc-alive-bar 3.5s ease-in-out infinite}
.services .svc-art .step{animation:svc-alive-step 3s ease-in-out infinite}
.services .svc-art .step:nth-of-type(2n){animation-delay:-1.5s}
.services .svc-art .orbit{animation:svc-alive-orbit 18s linear infinite}
.services .svc-art .node{animation:svc-pulse 2.4s ease-in-out infinite}
.services .svc-art .tick{animation:svc-alive-tick 5s ease-in-out infinite}
.services.is-motion-paused .svc-art,.services.is-motion-paused .svc-art *{animation-play-state:paused}
@keyframes svc-alive-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes svc-alive-lens{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,7px)}}
@keyframes svc-alive-bar{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1.06)}}
@keyframes svc-alive-step{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes svc-alive-orbit{to{transform:rotate(360deg)}}
@keyframes svc-alive-tick{0%,15%{stroke-dashoffset:1}45%,100%{stroke-dashoffset:0}}
@media(max-width:640px){.services__carousel{padding-inline:20px}.services__controls :is([data-services-prev],[data-services-next]){width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.services .svc-art,.services .svc-art *{animation:none!important}}

/* V11.9: no scrollbar or pause button; arrows remain at the edges. */
.services .services__grid{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px}
.services .services__grid::-webkit-scrollbar{display:none;width:0;height:0}
.services .services__controls{margin-top:0;height:0}
.services .svc-art{animation-duration:4.8s}
.services .svc-art .flow{animation-duration:4s}
.services .svc-art .orbit{animation-duration:14s}
