/* ============================================================
   FocusLab — services.css · règles propres à la page Services
   Chargé après focuslab.css, scopé sous body.services.
   Même grammaire que home.css : filets, label à gauche / titre à
   droite, un élément fort par section, zéro aplat, zéro coin viseur.
   ============================================================ */

/* ── Socle repris de l'ancien bloc <style> de services.html (structure de la sous-nav, repères, tokens d'offre) ── */
body.services #svcSticky{position:fixed;left:0;right:0;top:var(--svc-top,62px);z-index:70;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s var(--e-out),transform .3s var(--e-out)}
body.services #svcSticky.show{opacity:1;transform:none;pointer-events:auto}
body.services .svc-sticky-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
body.services .svc-sticky-in::-webkit-scrollbar{display:none}
body.services #svcSticky a{font-family:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
body.services #svcSticky a .n{margin-right:7px;font-size:.92em}
body.services #svcSticky .prog{position:absolute;left:0;background:var(--o);width:0;transition:width .12s linear}
body.services .svc-marker{display:flex;gap:16px}
body.services .svc-num{font-family:var(--display);letter-spacing:-.03em;opacity:0;transform:translateY(10px)}
body.services .svc-marker.in .svc-num{transform:none;transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
body.services .offer-ty{position:relative;display:inline-flex;align-items:center}
body.services .offer-ty::before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:8px;height:8px;box-sizing:border-box}
body.services .offer-ty.t-once::before{background:var(--o)}
body.services .offer-ty.t-sub::before,body.services .offer-ty.t-recur::before{border:1.5px solid var(--o);border-radius:50%}
body.services .offer-ty.t-advice::before{height:2px;width:10px;background:var(--o)}
body.services .offer-ty.t-support::before{width:9px;height:9px;border-left:1.5px solid var(--o);border-bottom:1.5px solid var(--o)}
@media(max-width:760px){body.services .svc-sticky-in{padding:8px 16px}}
@media(prefers-reduced-motion:reduce){body.services .svc-num{opacity:1!important;transform:none!important}body.services #svcSticky{transition:none!important}}

/* ── Échelle commune ── */
body.services .lbl{font-size:.7rem;letter-spacing:.26em;white-space:nowrap}
body.services .lbl.mut{color:var(--muted)}
body.services .nav-r a.l{font-size:.7rem;white-space:nowrap}
body.services .theme-btn{font-size:.62rem;white-space:nowrap}
body.services .nav-cta{font-size:.64rem;white-space:nowrap;padding:10px 16px}
body.services .btn{font-size:.72rem;padding:16px 30px;white-space:nowrap}
body.services #construction-bar .cb-close{white-space:nowrap;font-size:.56rem}
body.services .h2{font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:500;letter-spacing:-.03em;line-height:1.02;max-width:18ch;text-wrap:balance}
body.services .h2 em{display:inline;font-style:italic;margin:0}
body.services .lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.65;max-width:52ch;text-wrap:pretty}
body.services section[id]{scroll-margin-top:132px}

/* ── EN-TÊTE : titre à gauche, promesse à droite, index numéroté dessous ── */
body.services .phead{padding:clamp(180px,22vh,230px) 0 0;border-bottom:0;overflow:visible}
body.services .phead::after{display:none}
body.services.has-banner .phead{padding-top:clamp(218px,26vh,268px)}
body.services.has-disclaimer .phead{padding-top:clamp(213px,25vh,263px)}
body.services.has-banner.has-disclaimer .phead{padding-top:clamp(250px,29vh,300px)}
body.services .phead .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:end}
body.services .phead .lbl{grid-column:1;grid-row:1;color:var(--o)}
body.services .phead h1{grid-column:1;grid-row:2/4;margin-top:22px;font-weight:500;letter-spacing:-.035em;line-height:.96;font-size:clamp(3rem,8vw,7.2rem);max-width:none}
body.services .phead h1 .ac{color:var(--o)}
body.services .phead .lead{grid-column:2;grid-row:2;margin:0 0 4px;max-width:36ch}
body.services .phead .trust{grid-column:2;grid-row:3;margin:18px 0 0;padding:0;border:0;background:transparent;font-size:.72rem;letter-spacing:.1em;line-height:2;color:var(--muted)}
body.services .phead .trust b{color:var(--text);font-weight:500}
body.services .svc-nav{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);margin-top:clamp(56px,7vw,96px);counter-reset:svc;opacity:0;animation:flRise .7s var(--e-out) forwards .56s}
body.services .svc-nav a{counter-increment:svc;display:flex;flex-direction:column;gap:14px;border:0;border-top:1px solid var(--line);padding:20px 0 26px;font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.3rem);letter-spacing:-.02em;text-transform:none;color:var(--title);line-height:1.2;transition:color .25s var(--e-out)}
body.services .svc-nav a::before{content:counter(svc,decimal-leading-zero);font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.2em;color:var(--muted)}
body.services .svc-nav a:hover{color:var(--o)}
body.services .svc-nav a:hover::before{color:var(--o)}

/* ── SOUS-NAV STICKY : trait actif au lieu d'une boîte ── */
body.services #svcSticky{background:color-mix(in srgb,var(--bg) 92%,transparent)}
body.services .svc-sticky-in{padding:0 40px;gap:0}
body.services #svcSticky a{font-size:.62rem;padding:14px 14px 12px;border:0;margin-bottom:0;background:none;color:var(--muted);transition:color .25s var(--e-out)}
body.services #svcSticky a .n{color:var(--muted2)}
body.services #svcSticky a:hover{color:var(--title)}
body.services #svcSticky a.on{background:none;color:var(--title)}
body.services #svcSticky a.on .n{color:var(--o)}
body.services #svcSticky .prog{height:2px;opacity:1;bottom:-1px}

/* ── SECTIONS : filets, en-tête en deux colonnes, image en bandeau ── */
body.services .sec{padding:clamp(88px,11vw,150px) 0;border-top:1px solid var(--line)}
body.services .sec.alt{background:transparent}
body.services .sec > .wrap{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:start}
body.services .sec > .wrap > *{grid-column:1/-1;min-width:0}
body.services .svc-marker{grid-column:1;grid-row:1/4;margin:0;align-items:flex-start;padding-top:.15em}
body.services .svc-ico{display:none}
body.services .svc-num{font-weight:400;font-size:clamp(3rem,5.5vw,4.6rem);line-height:.85;color:var(--muted2);-webkit-text-stroke:0}
body.services .svc-marker.in .svc-num{opacity:1}
body.services .sec > .wrap > .lbl{grid-column:2;grid-row:1}
body.services .sec > .wrap > .h2{grid-column:2;grid-row:2;margin-top:16px!important}
body.services .sec > .wrap > .lead{grid-column:2;grid-row:3;margin-top:22px}
body.services #rh > .wrap > .h2{grid-row:2/4}
body.services .svc-img{position:relative;margin:clamp(48px,6vw,80px) 0 0;aspect-ratio:2.4/1;max-height:460px;overflow:hidden;background:var(--surface)}
body.services .svc-img img{display:block;width:100%;height:100%;object-fit:cover}
body.services .svc-img figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#f1ece1;white-space:nowrap;background:linear-gradient(90deg,rgba(10,9,8,.55),transparent)}
@supports(animation-timeline:view()){
  body.services .svc-img img{transform:scale(1.08);animation:svcZoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes svcZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
}
body.services .offers{margin-top:clamp(40px,5vw,64px);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,48px);align-items:start}
body.services .svc-img + .offers{margin-top:clamp(28px,3vw,40px)}

body.services .svc-img[hidden]{display:none}

/* ── OFFRES : une offre forte par section, les autres en lignes éditoriales ── */
body.services .offer{background:transparent;border:0;border-top:1px solid var(--line);padding:30px 0 40px;overflow:visible;transition:none}
body.services .offer:hover{transform:none;border-color:var(--line)}
body.services .offer.pri{grid-column:1/-1;border-top:1px solid var(--o);background:var(--surface);padding:clamp(28px,3.5vw,48px) clamp(24px,3.5vw,48px) clamp(30px,3.5vw,44px);margin-bottom:8px}
body.services .offer.pri .offer-nm{font-size:clamp(1.6rem,2.6vw,2.3rem);max-width:22ch}
body.services .offer.pri .offer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,48px)}
body.services .offer.pri .offer-list li{break-inside:avoid}
body.services .offer.pri .offer-buy{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:60ch}
body.services .offer.full:not(.pri){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-auto-rows:min-content;grid-auto-flow:row;column-gap:clamp(32px,5vw,72px);align-items:start}
body.services .offer.full:not(.pri) .offer-nm{grid-column:1;grid-row:1}
body.services .offer.full:not(.pri) .offer-ty{grid-column:1;grid-row:2}
body.services .offer.full:not(.pri) > :not(.offer-nm):not(.offer-ty){grid-column:2}
body.services .offer.full:not(.pri) > .offer-note{grid-row:1}
body.services .offer.full:not(.pri) .offer-lbl{margin-top:22px}
body.services .offer.full:not(.pri) .offer-list{margin-top:14px}
body.services .offer.full:not(.pri) .offer-warn,body.services .offer.full:not(.pri) .offer-cta{margin-top:20px}
body.services .offer.full:not(.pri) .offer-note,body.services .offer.full:not(.pri) .offer-lbl,body.services .offer.full:not(.pri) .offer-list,body.services .offer.full:not(.pri) .offer-buy,body.services .offer.full:not(.pri) .offer-warn,body.services .offer.full:not(.pri) .offer-cta{grid-column:2}
body.services .offer.full:not(.pri) .offer-ty{align-self:start;margin-top:12px}
body.services .offer.full:not(.pri) .offer-buy{margin-top:22px}
body.services .offer.full:not(.pri) .offer-note{margin-top:0}
body.services .offer.full:not(.pri) .offer-nm{max-width:14ch}
/* Paliers d'abonnement : deux colonnes en filets, le nom du palier porte, le quota en label */
body.services .tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,40px);margin-top:14px}
body.services .tier{border-top:1px solid var(--line);padding-top:16px}
body.services .tier-nm{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.02em;line-height:1.1;color:var(--title);margin:0}
body.services .tier-q{font-family:var(--label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--o);margin:8px 0 0}
body.services .tier-d{font-size:.94rem;line-height:1.55;color:var(--text);margin:12px 0 0;text-wrap:pretty}
body.services .offer-nm{font-weight:500;font-size:clamp(1.35rem,1.9vw,1.7rem);letter-spacing:-.02em;line-height:1.15;max-width:20ch}
body.services .offer-ty{margin-top:12px;border:0;padding:0 0 0 16px;font-size:.66rem;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
body.services .offer-ty::before{left:0}
body.services .offer-note{margin-top:16px;font-size:.92rem;color:var(--muted);font-style:normal;opacity:1}
body.services .offer-lbl{font-size:.64rem;letter-spacing:.2em;margin-top:22px}
body.services .offer-list{margin-top:14px}
body.services .offer-list li{font-size:.94rem;color:var(--text);line-height:1.6;margin-bottom:8px;padding-left:20px}
body.services .offer-list li::before{top:11px;width:9px;height:1px}
body.services .offer-buy{margin-top:22px;font-size:1rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
body.services .offer-buy em{color:var(--title);font-weight:500}
body.services .offer-warn{margin-top:16px;font-size:.84rem;border-left:0;padding:0;color:var(--muted)}
body.services .offer-cta{margin-top:22px}
body.services .offer-cta a{font-size:.68rem;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
body.services .offer-cta a:hover{color:var(--title)}
body.services .offer-buy[style]{margin-top:16px!important}
body.services .offer-list[style]{margin-top:14px!important}
body.services #events .wrap > p[style]{margin-top:clamp(28px,3vw,40px)!important;font-size:1rem!important}

/* ── PARTENARIAT LIEUX & APPEL FINAL : plus de boîte, une grande phrase ── */
body.services .contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(40px,6vw,96px);align-items:start;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:clamp(40px,5vw,64px) 0 0;overflow:visible}
body.services .contact .lbl{grid-column:1/-1;grid-row:1;justify-content:flex-start!important;margin-bottom:22px}
body.services .contact .h2{grid-column:1;grid-row:2/5;margin:0!important;font-size:clamp(2.6rem,6vw,5.4rem);max-width:12ch;line-height:.98}
body.services .contact .lead{grid-column:2;grid-row:2;margin:0 0 20px!important;max-width:34ch!important}
body.services .contact > p:not(.lead){grid-column:2;grid-row:3;margin:0 0 28px!important;max-width:34ch!important;font-size:.92rem!important;color:var(--muted)}
body.services .contact .btn{grid-column:2;grid-row:4;justify-self:start}
body.services #lieux .contact{margin-top:clamp(48px,6vw,80px)!important;grid-template-columns:minmax(0,1fr)}
body.services #lieux .contact .lbl{grid-row:1}
body.services #lieux .contact .lead{grid-column:1;grid-row:2;margin:0 0 32px!important;max-width:30ch!important;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.25;letter-spacing:-.02em;color:var(--title)}
body.services #lieux .contact .btn{grid-column:1;grid-row:3}

/* ── SOUS-TRAITANCE : réseau, zones, garanties en filets ── */
body.services .net{margin-top:clamp(48px,6vw,72px);border:0;border-top:1px solid var(--line);background:transparent;padding:30px 0 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,72px)}
body.services .net-t{grid-column:1;font-size:.7rem;letter-spacing:.24em;color:var(--o);margin:0;padding-top:.3em;white-space:normal;line-height:1.8}
body.services .net-d{grid-column:2;font-size:1rem;line-height:1.65;margin:0 0 20px;max-width:52ch}
body.services .net-tags{grid-column:2;gap:8px 10px}
body.services .ntag{font-size:.64rem;letter-spacing:.16em;padding:8px 12px;color:var(--text);white-space:nowrap}
body.services .zones{margin-top:clamp(36px,4vw,56px);gap:0 clamp(32px,5vw,72px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-top:1px solid var(--line);padding-top:30px}
body.services .zone-l{font-size:.66rem;letter-spacing:.2em;margin-bottom:6px}
body.services .zone-v{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
body.services #st .trust{margin-top:clamp(36px,4vw,56px);padding:26px 0 0;border:0;border-top:1px solid var(--line);background:transparent;font-size:.72rem;letter-spacing:.1em;line-height:2;color:var(--muted)}
body.services #st .trust b{color:var(--text);font-weight:500}

/* ── FOOTER ── */
body.services .foot{padding:clamp(56px,7vw,88px) 0 44px}
body.services .foot-tag{font-size:1.35rem;color:var(--title)}
body.services .foot-leg{font-size:.62rem;white-space:nowrap;flex-shrink:0}

/* ── Tablette (960px) : index sur 2 colonnes, en-têtes empilés ── */
@media(max-width:960px){
  body.services .svc-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.services .sec > .wrap{grid-template-columns:minmax(0,1fr)}
  body.services .svc-marker{grid-column:1;grid-row:1;margin-bottom:18px}
  body.services .sec > .wrap > .lbl,body.services .sec > .wrap > .h2,body.services .sec > .wrap > .lead{grid-column:1;grid-row:auto}
  body.services #rh > .wrap > .h2{grid-row:auto}
  body.services .svc-num{font-size:2.6rem}
}

/* ── Tablette étroite (820px) : deux colonnes → une ── */
@media(max-width:820px){
  body.services .phead .wrap{grid-template-columns:minmax(0,1fr)}
  body.services .phead .lbl,body.services .phead h1,body.services .phead .lead,body.services .phead .trust,body.services .svc-nav{grid-column:1;grid-row:auto}
  body.services .phead .lead{margin-top:26px}
  body.services .offer.full:not(.pri),body.services .net,body.services .zones,body.services .contact{grid-template-columns:minmax(0,1fr)}
  body.services .offer.full:not(.pri) > *,body.services .net > *,body.services .contact > *{grid-column:1!important;grid-row:auto!important}
  body.services .offer.full:not(.pri) .offer-note,body.services .offer.full:not(.pri) .offer-buy{margin-top:18px}
  body.services .contact .lead{margin:22px 0 24px!important}
  body.services .zones{gap:24px 0}
}

/* ── Mobile (760px) : une colonne, tailles resserrées ── */
@media(max-width:760px){
  body.services .lbl{white-space:normal}
  body.services .phead{padding-top:120px}
  body.services .phead h1{font-size:clamp(2.6rem,12vw,3.6rem)}
  body.services .offers{grid-template-columns:minmax(0,1fr);gap:0}
  body.services .offer{padding:26px 0 32px}
  body.services .offer.pri{padding:26px 20px 28px;margin:0 -20px 8px}
  body.services .offer.pri .offer-list{grid-template-columns:minmax(0,1fr)}
  body.services .tiers{grid-template-columns:minmax(0,1fr);gap:18px 0}
  body.services .svc-img{aspect-ratio:4/3;max-height:none}
  body.services .contact .h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  body.services .nav-cta{font-size:.58rem;padding:9px 12px}
  body.services .nav-r{gap:10px}
  body.services .foot-tag{font-size:1.15rem}
}

/* ── Portrait étroit (600px) ── */
@media(max-width:600px){
  body.services .svc-nav{grid-template-columns:minmax(0,1fr)}
  body.services .svc-nav a{flex-direction:row;align-items:baseline;gap:16px;padding:16px 0}
  body.services .h2{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.services .offer-nm{font-size:1.35rem}
  body.services .offer.pri .offer-nm{font-size:1.6rem}
  body.services .btn{width:100%;text-align:center}
}

/* ── Accessibilité ── */
@media(prefers-reduced-motion:reduce){
  body.services .svc-nav{opacity:1!important;animation:none!important}
  body.services .svc-img img{animation:none!important;transform:none!important}
}