/* Styles des pages services (repris de index.html). */
@font-face{font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/ibm-plex-sans.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');}
:root{
  --bg:#f6f7f9; --surface:#fff; --sunk:#eef0f4;
  --ink:#0b1324; --ink-2:#38404f; --muted:#5f677a;
  --rule:#e1e4ea; --rule-2:#d2d6de;
  --navy:#0d1830; --on-navy:#e8ecf3; --on-navy-2:#a8b2c5; --rule-navy:#24324f;
  --red:#e63946; --red-ink:#c8202d; --red-soft:#fdecee; --ok:#1f8a5b;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.label b{color:var(--red-ink); font-weight:500;}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-weight:600;}
.skip:focus{top:12px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:6px; border:1px solid transparent; font-weight:600; font-size:15px; white-space:nowrap; transition:background .2s, border-color .2s;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--red);}
.btn-ghost{background:var(--surface); border-color:var(--rule-2);}
.btn-ghost:hover{border-color:var(--ink);}

header{position:sticky; top:0; z-index:50; background:rgba(246,247,249,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);}
nav{display:flex; align-items:center; gap:28px; height:64px;}
.logo{display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem; flex-shrink:0;}
.logo img{width:22px; height:22px;}
.logo b{color:#d62f3c; font-weight:inherit;}
.nav-links{display:flex; gap:22px; font-size:14.5px; font-weight:500; color:var(--ink-2);}
.nav-links a:hover, .nav-links a[aria-current]{color:var(--ink);}
.nav-links a[aria-current]{box-shadow:inset 0 -2px 0 var(--red);}
.nav-right{margin-left:auto;}
nav .btn{padding:10px 16px; font-size:14px;}
.nav-toggle{display:none; width:40px; height:40px; border:1px solid var(--rule-2); border-radius:6px; background:var(--surface); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
.nav-toggle span{width:16px; height:1.5px; background:var(--ink);}

.crumbs{font-size:13.5px; color:var(--muted); padding-top:28px;}
.crumbs a{text-decoration:underline; text-underline-offset:2px;}
.hero{padding:28px 0 clamp(48px,6vw,80px); background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:56px 56px; position:relative;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(246,247,249,.6),var(--bg) 92%); pointer-events:none;}
.hero .wrap{position:relative; z-index:1;}
.hero .label{display:block; margin:28px 0 14px;}
.hero h1{font-size:clamp(34px,4.6vw,58px); font-weight:600; line-height:1.06; letter-spacing:-.03em; max-width:22ch; text-wrap:balance; margin-bottom:22px;}
.lead{font-size:clamp(17px,1.4vw,19px); color:var(--ink-2); max-width:62ch; margin-bottom:30px;}
.actions{display:flex; gap:12px; flex-wrap:wrap;}
.facts{list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:32px; font-size:14.5px; color:var(--ink-2);}
.facts li::before{content:"✓ "; color:var(--ok); font-family:var(--mono);}

.sec{padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--rule);}
.sec-head{display:grid; grid-template-columns:200px 1fr; gap:32px; margin-bottom:clamp(28px,4vw,48px);}
.sec-head h2{font-size:clamp(26px,3vw,38px); font-weight:600; line-height:1.14; letter-spacing:-.02em; max-width:26ch; text-wrap:balance;}
.sec-head p{margin-top:12px; color:var(--ink-2); max-width:62ch;}
.prose{max-width:70ch; color:var(--ink-2); font-size:16.5px;}
.prose p + p{margin-top:14px;}
.prose strong{color:var(--ink);}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.card{background:var(--surface); border:1px solid var(--rule-2); border-radius:10px; padding:24px;}
.card h3{font-size:17.5px; font-weight:600; margin:6px 0 8px;}
.card p{font-size:15px; color:var(--ink-2);}

.uses{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 32px;}
.uses li{padding:14px 0; border-top:1px solid var(--rule); color:var(--ink-2); display:flex; gap:12px;}
.uses li::before{content:"→"; color:var(--red); font-family:var(--mono);}
.uses strong{color:var(--ink);}

.case{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; background:var(--surface); border:1px solid var(--rule-2); border-radius:10px; padding:clamp(20px,3vw,32px);}
.case img{width:100%; height:auto; border:1px solid var(--rule-2); border-radius:8px;}
.case h3{font-size:24px; font-weight:600; margin:6px 0 10px;}
.case p{color:var(--ink-2); margin-bottom:12px;}
.case dl{display:grid; grid-template-columns:72px 1fr; gap:10px 16px; font-size:14.5px; margin:16px 0 20px;}
.case dt{font-family:var(--mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; padding-top:3px;}
.case dd{color:var(--ink-2);}
.case-link{font-weight:600; border-bottom:1px solid var(--red); padding-bottom:2px;}

.stack{display:flex; flex-wrap:wrap; gap:8px;}
.stack span{font-size:14px; font-weight:500; padding:6px 12px; border:1px solid var(--rule-2); border-radius:999px; background:var(--surface);}

.timeline{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule-2); border-radius:10px; background:var(--surface); overflow:hidden;}
.t-step{padding:24px; border-left:1px solid var(--rule);}
.t-step:first-child{border-left:none;}
.t-step h3{font-size:17px; font-weight:600; margin:6px 0 6px;}
.t-step p{font-size:14.5px; color:var(--ink-2);}

.price-box{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--ink); box-shadow:0 0 0 1px var(--ink); border-radius:10px; padding:28px;}
.price{font-size:38px; font-weight:600; letter-spacing:-.03em; line-height:1.1;}
.price small{font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0;}
.price-box ul{list-style:none; display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; font-size:14.5px; color:var(--ink-2);}
.price-box li::before{content:"✓ "; color:var(--ok); font-family:var(--mono);}

.faq{border:1px solid var(--rule-2); border-radius:10px; background:var(--surface); overflow:hidden;}
.faq details{border-bottom:1px solid var(--rule);}
.faq details:last-child{border-bottom:none;}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; display:grid; grid-template-columns:1fr 20px; gap:12px; align-items:center; font-weight:600; font-size:16.5px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:20px; color:var(--muted);}
.faq details[open] summary::after{content:"−"; color:var(--red);}
.faq details p{padding:0 24px 22px; color:var(--ink-2); max-width:76ch;}

.others{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.others a{display:block; background:var(--surface); border:1px solid var(--rule-2); border-radius:10px; padding:20px 22px; font-weight:600; transition:border-color .2s;}
.others a:hover{border-color:var(--ink);}
.others a span{display:block; font-weight:400; font-size:14.5px; color:var(--muted); margin-top:4px;}

.cta{background:var(--navy); color:var(--on-navy); padding:clamp(56px,7vw,88px) 0;}
.cta h2{font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:-.02em; color:#fff; margin-bottom:10px;}
.cta p{color:var(--on-navy-2); max-width:60ch; margin-bottom:26px;}
.cta .btn-primary{background:var(--red);}
.cta .btn-primary:hover{background:#fff; color:var(--ink);}
.cta .btn-ghost{background:transparent; color:#fff; border-color:var(--rule-navy);}
.cta .btn-ghost:hover{border-color:#fff;}

footer{background:var(--navy); color:var(--on-navy-2); border-top:1px solid var(--rule-navy); font-size:14.5px;}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding:48px 24px 36px;}
footer .logo{color:#fff; margin-bottom:12px;}
footer .logo b{color:#ff5a66;}
footer .label{color:var(--on-navy-2); margin-bottom:12px; display:block;}
footer ul{list-style:none;}
footer li{padding:4px 0;}
footer a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px 24px; border-top:1px solid var(--rule-navy); font-size:13px;}
.foot-bottom a{text-decoration:underline; text-underline-offset:2px;}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;}}
@media(max-width:900px){
  .nav-toggle{display:flex;}
  nav .btn{display:none;}
  .nav-right{margin-left:auto;}
  .nav-links{position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--rule); padding:4px 24px 16px; font-size:17px; display:none;}
  .nav-links a{padding:12px 0; border-top:1px solid var(--rule);}
  .nav-links a[aria-current]{box-shadow:none; color:var(--red-ink);}
  .nav-links.open{display:flex;}
  .sec-head{grid-template-columns:1fr; gap:10px;}
  .cards, .others{grid-template-columns:1fr 1fr;}
  .case, .foot{grid-template-columns:1fr;}
  .timeline{grid-template-columns:1fr 1fr;}
  .t-step:nth-child(3){border-left:none;}
  .t-step:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media(max-width:600px){
  .cards, .others, .uses, .timeline{grid-template-columns:1fr;}
  .t-step{border-left:none!important; border-top:1px solid var(--rule);}
  .t-step:first-child{border-top:none;}
}