/* p-services.css — page « Tous nos services » : l'index (14-10).
   Chargé seulement par services.html ; tout est préfixé body.p-services.
   Hors @layer comme pages.css : on gagne par la spécificité, jamais par !important (sauf mouvement réduit). */

body.p-services{
  --sv-forest:var(--forest-900);
  --sv-eo:cubic-bezier(.23,1,.32,1);
}

/* ================================================================
   HÉROS — affiche : titre géant sur forêt, photo en bandeau, registre « de → vers »
   ================================================================ */
body.p-services .sv-hero{
  background:var(--forest-900);color:var(--paper);
  padding-block:clamp(36px,5vw,72px) clamp(48px,7vw,104px);
}
body.p-services .sv-hero .breadcrumb ol,
body.p-services .sv-hero .breadcrumb a{color:var(--muted-dark)}
body.p-services .sv-hero .breadcrumb a:hover{color:var(--paper)}
body.p-services .sv-hero .breadcrumb li+li::before{color:var(--muted-dark)}
body.p-services .sv-hero .breadcrumb [aria-current="page"]{color:var(--paper)}
body.p-services main.int .sv-hero .page-title{
  margin-top:clamp(20px,3vw,40px);
  font-family:var(--font-display);font-weight:200;color:var(--paper);
  font-size:clamp(2.55rem,6.7vw,6.6rem);line-height:1;letter-spacing:-.035em;
  max-width:16ch;text-wrap:balance;
}
body.p-services main.int .sv-hero .lead{color:var(--paper);font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);max-width:42ch}
body.p-services .sv-hero .btn-ghost{border-color:rgba(247,243,234,.4);color:var(--paper)}
body.p-services .sv-hero .btn-ghost:hover{border-color:var(--paper)}
body.p-services .sv-hero :focus-visible{outline-color:var(--orange)}
body.p-services .sv-hero .pgh-media{margin-top:clamp(28px,4vw,44px)}
body.p-services .sv-hero .pgh-clip{border-radius:2px}

@media (min-width:900px){
  body.p-services main.int .sv-hero .pgh-grid.has-media{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(20px,3vw,44px);row-gap:0;align-items:start;
  }
  body.p-services .sv-hero .pgh-copy{display:contents}
  body.p-services .sv-hero .breadcrumb{grid-column:1/-1;grid-row:1}
  body.p-services main.int .sv-hero .page-title{grid-column:1/-1;grid-row:2;max-width:15ch}
  body.p-services main.int .sv-hero .lead{grid-column:1/6;grid-row:3;margin-top:clamp(26px,3.4vw,48px)}
  body.p-services .sv-hero .page-hero-actions{grid-column:1/6;grid-row:4;align-self:start}
  body.p-services main.int .sv-hero .pgh-grid.has-media .pgh-media{
    grid-column:7/-1;grid-row:3 / span 2;margin:clamp(26px,3.4vw,48px) 0 0;aspect-ratio:auto;align-self:stretch;
    min-height:clamp(260px,27vw,400px);
  }
}
@media (min-width:900px) and (max-width:1099px){
  body.p-services main.int .sv-hero .pgh-grid.has-media{display:grid}
  body.p-services main.int .sv-hero .pgh-grid.has-media .pgh-media{margin:clamp(26px,3.4vw,48px) 0 0;aspect-ratio:auto}
}
@media (max-width:899px){
  body.p-services .sv-hero .pgh-media{aspect-ratio:16/10}
}

/* Registre : aujourd'hui / avec Trifecta, puis trois mutations */
body.p-services .sv-hero .pair{
  gap:0;margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--hairline-dark);
}
body.p-services .sv-hero .pair-side{border:0;border-radius:0;padding:clamp(22px,3vw,34px) 0 0;background:none}
body.p-services .sv-hero .pair-lbl{color:var(--muted-dark)}
body.p-services .sv-hero .pair-with .pair-lbl{color:var(--orange-light)}
body.p-services .sv-hero .pair-txt{color:var(--paper);font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;max-width:40ch}
body.p-services .sv-hero .pair-today .pair-txt{color:var(--muted-dark)}
@media (min-width:760px){
  body.p-services .sv-hero .pair{grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,80px)}
}
body.p-services .sv-hero .triplets{margin-top:clamp(32px,4vw,56px);gap:0 clamp(20px,3vw,44px)}
body.p-services .sv-hero .triplets li{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  min-height:0;padding:clamp(18px,2.4vw,26px) 0;border:0;border-top:1px solid var(--hairline-dark);border-radius:0;background:none;
}
body.p-services .sv-hero .tri-from{flex:0 0 100%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
body.p-services .sv-hero .tri-arrow{color:var(--orange)}
body.p-services .sv-hero .tri-to{
  font-family:var(--font-display);font-weight:300;color:var(--paper);
  font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.1;letter-spacing:-.02em;
}
@media (min-width:760px){
  body.p-services .sv-hero .triplets{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.p-services .sv-hero .triplets li{flex-wrap:wrap}
}

/* ================================================================
   INDEX — une famille = une étape ; une ligne = un service
   ================================================================ */
body.p-services main.int .ix{padding-block:clamp(64px,8vw,128px)}
body.p-services main.int .ix .wrap{display:block}
body.p-services .ix .ix-num{
  display:block;font-family:var(--font-display);font-weight:200;
  font-size:clamp(4.4rem,16vw,6.4rem);line-height:.82;letter-spacing:-.05em;
  color:var(--ink-900);font-variant-numeric:tabular-nums;
}
body.p-services main.int :is(#visibilite,#site,#intelligence-artificielle) .sec-title::before{content:none}
body.p-services main.int .ix .sec-title{
  font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:400;line-height:1.12;letter-spacing:-.02em;max-width:16ch;
}
body.p-services main.int .ix .section-body{padding-top:0}
body.p-services main.int .ix .section-body .page-body:first-child{
  font-size:clamp(1.1rem,1.05rem + .45vw,1.35rem);line-height:1.5;max-width:52ch;color:var(--ink-900);
}
body.p-services .ix .section-head{margin-bottom:clamp(24px,4vw,40px)}

/* vitrine photo (colonne épinglée) */
body.p-services .ix .ix-stage{display:none}
body.p-services main.int .ix .pgs-media.ix-stage{display:block;position:relative;top:auto;margin:clamp(6px,2vw,16px) 0 0;aspect-ratio:16/10;max-height:none;width:100%}
body.p-services .ix .ix-stage .pgs-clip{border-radius:2px}
body.p-services .ix .ix-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
body.p-services main.int .ix .pgs-media:not(.is-shot) img{object-position:50% 40%}
body.p-services .ix .ix-img{filter:var(--sig-filter)}
body.p-services .ix .ix-stage .ix-img:not(:first-child){display:none}

/* liste */
body.p-services main.int .ix .ix-list{display:block;margin-top:clamp(18px,3vw,36px);border-top:2px solid var(--ink-900)}
body.p-services main.int .ix .ix-row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(14px,2vw,28px);align-items:start;
  padding:clamp(18px,2.2vw,28px) 0;border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:none;
  transition:none;
}
body.p-services main.int .ix .ix-row:hover,
body.p-services main.int .ix .ix-row:has(.card-link):hover{background:none;border-color:var(--hairline);translate:none;box-shadow:none}
body.p-services main.int .ix .ix-row h3{
  grid-column:1;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.7rem,3.55vw,3.55rem);line-height:1.04;letter-spacing:-.028em;color:var(--ink-900);
  transition:color .25s var(--sv-eo),translate .35s var(--sv-eo);
}
body.p-services main.int .ix .ix-row .card-link{font:inherit;letter-spacing:inherit}
body.p-services .ix .ix-more{grid-column:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--sv-eo),opacity .3s ease}
body.p-services .ix .ix-more-in{min-height:0;overflow:hidden}
body.p-services main.int .ix .ix-row p{margin-top:12px;color:var(--ink-900);font-size:clamp(1.02rem,1rem + .2vw,1.15rem);line-height:1.5;max-width:46ch;opacity:.82}
body.p-services main.int .ix .ix-row .card-price{
  margin-top:10px;font:600 15px/1.3 var(--font-body);letter-spacing:.02em;color:var(--orange-deep);opacity:1;
}
body.p-services main.int .ix .ix-row .card-go{
  grid-column:2;grid-row:1 / span 2;align-self:start;margin:6px 0 0;
  width:clamp(40px,4vw,56px);height:clamp(40px,4vw,56px);border:1px solid var(--ink-900);border-radius:50%;
  align-items:center;justify-content:center;color:var(--ink-900);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .3s var(--sv-eo);
}
body.p-services main.int .ix .ix-row .card-go svg{margin:0;width:20px;height:20px}
body.p-services main.int .ix .ix-row:has(.card-price) .card-go{margin-top:6px}

body.p-services main.int .ix .ix-row.is-active h3,
body.p-services main.int .ix .ix-row:hover h3,
body.p-services main.int .ix .ix-row:focus-within h3{color:var(--orange-deep)}
body.p-services main.int .ix .ix-row.is-active .card-go,
body.p-services main.int .ix .ix-row:hover .card-go{background:var(--orange);border-color:var(--orange);color:var(--ink-900);transform:rotate(-45deg)}
body.p-services main.int .ix .ix-row:hover .card-go{transform:rotate(-45deg)}

/* bureau avec souris, mouvement permis : colonne gauche épinglée + lignes qui s'ouvrent */
@media (min-width:1000px){
  body.p-services main.int .ix .wrap{
    display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(44px,6vw,104px);align-items:start;
  }
  body.p-services main.int .ix .wrap>.sec-top{display:contents}
  body.p-services main.int .ix .wrap>.sec-top .section-head{
    grid-column:1;grid-row:1 / span 2;align-self:start;position:sticky;top:104px;margin-bottom:0;gap:clamp(14px,2vw,22px);
  }
  body.p-services main.int .ix .wrap>.sec-top .section-body{grid-column:2;grid-row:1;padding-top:0;align-self:end}
  body.p-services main.int .ix .ix-list{grid-column:2;grid-row:2;margin-top:clamp(28px,3.4vw,52px)}
  body.p-services .ix .ix-num{font-size:clamp(6.5rem,13vw,12rem)}
  body.p-services .ix .ix-stage,
  body.p-services main.int .ix .pgs-media.ix-stage{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;margin-top:clamp(10px,2vw,24px)}
  body.p-services .ix .ix-stage,
  body.p-services main.int .ix .pgs-media.ix-stage{aspect-ratio:5/6;max-height:max(260px,calc(100vh - 410px))}
  body.p-services .ix .ix-stage .ix-img:not(:first-child){display:block}
  body.p-services .ix .ix-img{opacity:0;transform:scale(1.07);transition:opacity .7s ease,transform 1.4s var(--sv-eo),object-position 1.2s var(--sv-eo)}
  body.p-services .ix .ix-stage:not(.ix-live) .ix-img:first-child,
  body.p-services .ix .ix-img.is-on{opacity:1;transform:none}
}
@media (min-width:1000px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  body.p-services .ix.ix-ready .ix-row:not(.is-active):not(:hover):not(:focus-within) .ix-more{grid-template-rows:0fr;opacity:0}
  body.p-services main.int .ix.ix-ready .ix-row:not(.is-active):not(:hover):not(:focus-within) h3{color:var(--ink-900)}
  body.p-services main.int .ix.ix-ready .ix-row.is-active h3,
  body.p-services main.int .ix.ix-ready .ix-row:hover h3{translate:12px 0}
}
@media (prefers-reduced-motion:reduce){
  body.p-services .ix .ix-img{transition:none}
}

/* ================================================================
   AUTONOMIE — trois formations en registre
   ================================================================ */
body.p-services main.int .sv-auto .cards{display:grid;grid-template-columns:1fr;gap:0 clamp(28px,4vw,64px);margin-top:clamp(28px,4vw,52px)}
@media (min-width:760px){body.p-services main.int .sv-auto .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.p-services main.int .sv-auto .cards li{
  padding:clamp(20px,2.4vw,30px) 0 clamp(26px,3vw,40px);border:0;border-top:2px solid var(--ink-900);border-radius:0;background:none;
}
body.p-services main.int .sv-auto .cards h3{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.55rem,2.5vw,2.3rem);line-height:1.08;letter-spacing:-.025em;
}
body.p-services main.int .sv-auto .cards p{margin-top:14px;color:var(--ink-900);opacity:.8;font-size:1.08rem;max-width:34ch}

/* ================================================================
   ÉTAPES — quatre panneaux qui s'empilent, le grand numéro reste dans le panneau
   ================================================================ */
body.p-services main.int .sv-etapes{background:var(--ink-900);padding-block:clamp(64px,8vw,120px) clamp(72px,9vw,150px)}
body.p-services main.int .sv-etapes .sec-title{font-size:clamp(2.2rem,5vw,4.4rem);font-weight:200;letter-spacing:-.03em}
body.p-services main.int .sv-etapes .steps{border:0;margin-top:clamp(28px,4vw,56px);display:grid;gap:clamp(14px,2vw,22px)}
body.p-services main.int .sv-etapes .steps li{
  display:grid;grid-template-columns:1fr;gap:6px;align-items:start;
  padding:clamp(22px,3.4vw,52px);border:0;border-radius:14px;color:var(--paper);
  background:var(--ink-800);box-shadow:inset 0 0 0 1px var(--hairline-dark);
}
body.p-services main.int .sv-etapes .steps li:nth-child(2){background:var(--forest-900)}
body.p-services main.int .sv-etapes .steps li:nth-child(3){background:var(--forest-700)}
body.p-services main.int .sv-etapes .steps li:nth-child(4){background:var(--champagne);color:var(--ink-900);box-shadow:none}
body.p-services main.int .sv-etapes .step-num{
  font-family:var(--font-display);font-weight:200;font-size:clamp(5.5rem,22vw,8rem);line-height:.8;letter-spacing:-.05em;
  color:var(--orange);font-variant-numeric:tabular-nums;
}
body.p-services main.int .sv-etapes .steps li:nth-child(4) .step-num{color:var(--orange-deep)}
body.p-services main.int .sv-etapes .steps h3{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,3.3vw,3rem);line-height:1.05;letter-spacing:-.025em;color:inherit}
body.p-services main.int .sv-etapes .steps p{margin-top:12px;color:var(--muted-dark);font-size:clamp(1.05rem,1rem + .25vw,1.2rem);line-height:1.5;max-width:46ch}
body.p-services main.int .sv-etapes .steps li:nth-child(3) p{color:#D9D2C3}
body.p-services main.int .sv-etapes .steps li:nth-child(4) p{color:var(--ink-900);opacity:.85}
@media (min-width:900px){
  body.p-services main.int .sv-etapes .steps{display:block;gap:0}
  body.p-services main.int .sv-etapes .steps li{
    position:sticky;top:calc(92px + var(--i,0) * 26px);min-height:clamp(300px,46vh,430px);margin-bottom:clamp(26px,5vh,56px);
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,64px);align-items:center;
    box-shadow:inset 0 0 0 1px var(--hairline-dark),0 -18px 40px -22px rgba(0,0,0,.55);
  }
  body.p-services main.int .sv-etapes .steps li:nth-child(4){box-shadow:0 -18px 40px -22px rgba(0,0,0,.55)}
  body.p-services main.int .sv-etapes .step-num{font-size:clamp(8rem,17vw,15rem)}
}

/* ================================================================
   FAQ — grandes questions numérotées
   ================================================================ */
body.p-services main.int .faq .faq-list{counter-reset:q}
body.p-services main.int .faq details{counter-increment:q}
body.p-services main.int .faq summary{
  min-height:0;padding:clamp(20px,2.4vw,30px) 4px;gap:clamp(14px,2vw,28px);
  font-size:clamp(1.3rem,2.3vw,2rem);font-weight:300;line-height:1.15;letter-spacing:-.02em;
}
body.p-services main.int .faq summary::before{
  content:counter(q,decimal-leading-zero) / "";flex:0 0 2.2rem;
  font:500 .85rem/1 var(--font-body);letter-spacing:.12em;color:var(--orange-deep);font-variant-numeric:tabular-nums;
}
body.p-services main.int .faq summary span{flex:1 1 auto}
body.p-services main.int .faq .faq-a{padding-left:calc(2.2rem + clamp(14px,2vw,28px) + 4px);font-size:1.1rem}
@media (max-width:599px){
  body.p-services main.int .faq summary::before{flex-basis:1.8rem}
  body.p-services main.int .faq .faq-a{padding-left:4px;padding-right:4px}
}

/* ================================================================
   VOIR AUSSI — grandes entrées
   ================================================================ */
body.p-services main.int #voir-aussi .related-card{
  border:0;border-top:2px solid var(--ink-900);border-radius:0;padding:clamp(18px,2.4vw,28px) 0 clamp(22px,3vw,36px);
  background:none;gap:clamp(22px,4vw,56px);
}
body.p-services main.int #voir-aussi .related-card h3{font-weight:300;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.06;letter-spacing:-.025em}
body.p-services main.int #voir-aussi .related-card:hover{background:none;box-shadow:none;translate:none}
body.p-services main.int #voir-aussi .related-card:hover h3{color:var(--orange-deep)}

@media print{
  body.p-services .ix .ix-more{grid-template-rows:1fr!important;opacity:1!important}
}