/* ==========================================================================
   Page Services : Migration Divalto vers le SaaS — V1.1 (direction visuelle repensée)
   Fil conducteur : la migration comme trajectoire. Chaque élément graphique
   porte une information réelle : trajectoire jalonnée par les cinq étapes,
   échelle des responsabilités (d’après les définitions de l’éditeur),
   grandes étapes numérotées. Aucune interface, aucun graphique inventé.
   Classes préfixées (mx, qf, qx, prx, ptx, rs). Colonnes minmax(0,…).
   ========================================================================== */
.page-migration main{overflow-x:clip}
.opt{font-weight:500;color:var(--stone)}

/* ---------- Premier écran : grand titre et trajectoire ---------- */
.s-mx{padding:104px 0 clamp(56px,6vw,92px);background:radial-gradient(60% 50% at 85% 85%,rgba(243,154,46,.16),rgba(243,154,46,0) 70%),linear-gradient(180deg,#fff 0%,var(--ivory) 100%)}
.mx__top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px);margin:8px 0 clamp(36px,5vw,64px)}
.mx__h{min-width:0}
.mxh1{font-size:clamp(40px,5.2vw,80px);line-height:.98;letter-spacing:-.05em;margin:0;max-width:22ch}
.mxh1 .line{display:block}
.mx__side{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px clamp(28px,5vw,72px)}
.mx__side .hero__lead{margin:0;font-size:clamp(16.5px,1.3vw,19.5px);max-width:58ch;min-width:0}
.mx__side .hero__actions{margin:0;flex:none}
/* trajectoire */
.mx__track{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);align-items:stretch;gap:0}
.mx__end{min-width:0;padding:clamp(18px,2vw,26px)}
.mx__end--from{border:1.5px dashed #D9CEC0;border-radius:22px 0 0 22px;border-right:0;background:rgba(255,255,255,.55)}
.mx__end--to{border-radius:0 22px 22px 0;background:#fff;box-shadow:0 40px 80px -50px rgba(120,60,0,.55);border:1.5px solid var(--orange);border-left:0}
.mx__k{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.mx__end--to .mx__k{color:var(--orange-ink)}
.mx__t{margin:0 0 10px;font-size:clamp(18px,1.6vw,22px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.mx__end--from .mx__t{color:#5C554E}
.mx__end ul{margin:0;padding:0;list-style:none}
.mx__end li{padding:3px 0;font-size:14px;color:#7A736B}
.mx__end li::before{content:"· ";color:#B7AA99}
.mx__d{margin:0;font-size:14.5px;line-height:1.5;color:#4A4642}
.mx__steps{position:relative;align-self:center;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;margin:0;padding:0 6px;list-style:none}
.mx__steps::before{content:"";position:absolute;left:0;right:0;top:21px;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,#D9CEC0,var(--orange) 70%)}
.mx__steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:13.5px;font-weight:700;line-height:1.25;color:var(--ink);padding:0 4px}
.mx__steps li span{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--orange);font-size:13px;font-weight:800;color:var(--orange-ink)}
.mx__steps li:last-child span{background:var(--orange);color:var(--on-orange)}

@media (max-width:1000px){
  .s-mx .crumb{display:none}
  .mx__track{grid-template-columns:minmax(0,1fr)}
  .mx__end--from{border-radius:20px 20px 0 0;border-right:1.5px dashed #D9CEC0;border-bottom:0}
  .mx__end--to{border-radius:0 0 20px 20px;border-left:1.5px solid var(--orange);border-top:0}
  .mx__steps{grid-template-columns:minmax(0,1fr);padding:10px 0 10px 18px}
  .mx__steps::before{left:37px;right:auto;top:0;bottom:0;width:3px;height:auto;margin:0;background:linear-gradient(180deg,#D9CEC0,var(--orange))}
  .mx__steps li{flex-direction:row;align-items:center;text-align:left;padding:7px 0;gap:14px}
  .mx__steps li span{width:40px;height:40px;flex:none}
}
@media (max-width:600px){
  .s-mx{padding-top:88px}
  .mxh1{font-size:clamp(34px,10vw,44px)}
  .mx__side .hero__lead{font-size:15.5px;line-height:1.5}
  .mx__side .hero__actions{gap:10px;flex:1 1 100%;width:100%;min-width:0}
  .mx__side .hero__actions .btn{width:100%;justify-content:center}
}

/* ---------- Qui fait quoi : échelle des responsabilités ---------- */
.s-qf{padding:clamp(84px,10vw,130px) 0;background:#fff}
.qf__head{max-width:840px;margin-bottom:clamp(34px,4vw,56px)}
.qf__scale{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:12px}
.qf__pole{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--stone)}
.qf__pole--r{text-align:right;color:var(--orange-ink)}
.qf__bar{grid-column:1 / -1;height:10px;border-radius:999px;background:linear-gradient(90deg,#E9E1D6 0%,#F3C796 55%,var(--orange) 100%)}
.qf__modes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);margin:0}
.qf__modes>div{position:relative;min-width:0;padding-top:26px}
.qf__modes>div::before{content:"";position:absolute;top:-17px;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #CFC3B3}
.qf__modes>div:nth-child(1)::before{left:0}
.qf__modes>div:nth-child(2)::before{left:50%;margin-left:-12px;border-color:#F0B577}
.qf__modes>div:nth-child(3)::before{right:0;border-color:var(--orange);background:var(--orange)}
.qf__modes>div:nth-child(2){text-align:center}
.qf__modes>div:nth-child(3){text-align:right}
.qf__modes dt{margin:0 0 8px;font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.qf__saas dt{font-size:clamp(28px,3vw,42px);color:var(--orange-deep)}
.qf__modes dd{margin:0;font-size:15px;line-height:1.55;color:#4A4642}
.qf__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:clamp(48px,6vw,80px);border-radius:30px;overflow:hidden}
.qf__half{min-width:0;padding:clamp(26px,3.4vw,48px);background:var(--ivory)}
.qf__half--you{background:#FDF0DF}
.qf__half h3{margin:0 0 12px;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em}
.qf__half p{margin:0;font-size:16.5px;line-height:1.7;color:#3E3A36}
.qf__aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(24px,3.5vw,48px);margin-top:clamp(28px,3vw,44px);padding-top:clamp(20px,2.4vw,30px);border-top:2px solid var(--ink)}
.qf__aside p{margin:0;font-size:15.5px;line-height:1.65;color:#3E3A36}
.qf__aside b{display:block;margin-bottom:4px;font-size:17px;color:var(--ink)}
.qf__aside a{color:var(--ink);font-weight:700}
.qf__src{margin:18px 0 0;font-size:13px;color:var(--stone)}
@media (max-width:860px){
  .qf__scale{grid-template-columns:28px minmax(0,1fr);column-gap:18px}
  .qf__pole{grid-column:2}.qf__pole--l{order:0}.qf__pole--r{order:4;text-align:left}
  .qf__bar{grid-column:1;grid-row:2 / span 2;width:8px;height:auto;justify-self:center;background:linear-gradient(180deg,#E9E1D6,#F3C796 55%,var(--orange))}
  .qf__modes{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);row-gap:22px}
  .qf__modes>div,.qf__modes>div:nth-child(2),.qf__modes>div:nth-child(3){text-align:left;padding-top:0}
  .qf__modes>div::before,.qf__modes>div:nth-child(1)::before,.qf__modes>div:nth-child(2)::before,.qf__modes>div:nth-child(3)::before{top:2px;left:-40px;right:auto;margin:0}
  .qf__split,.qf__aside{grid-template-columns:minmax(0,1fr)}
  .qf__split{border-radius:22px}
}

/* ---------- Vos questions : grandes interrogations ---------- */
.s-qs{padding:clamp(84px,10vw,130px) 0;background:linear-gradient(180deg,var(--ivory),#F6EEE3)}
.qx{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:start}
.qx__side{min-width:0;position:sticky;top:110px}
.qx__lead{margin:16px 0 0;font-size:17px;line-height:1.55;color:#4A4642}
.qx__list{min-width:0;margin:0;border-top:2px solid var(--ink)}
.qx__list>div{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid #E3D6C4}
.qx__list dt{margin:0 0 8px;font-size:clamp(21px,2.1vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.qx__list dd{margin:0;max-width:60ch;font-size:16px;line-height:1.6;color:#4A4642}
.qx__note{grid-column:2;margin:0;padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,28px);border-radius:20px;background:#fff;font-size:16px;line-height:1.6;color:#3E3A36}
.qx__note b{color:var(--orange-ink)}
@media (max-width:900px){.qx{grid-template-columns:minmax(0,1fr)}.qx__side{position:static}.qx__note{grid-column:1}}

/* ---------- Cinq étapes : temps fort ---------- */
.s-pr{padding:clamp(84px,10vw,130px) 0;background:#fff}
.pr__head{max-width:900px;margin-bottom:clamp(36px,5vw,64px)}
.pr__promise{margin:16px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#4A4642}
.pr__promise b{color:var(--ink)}
.prx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:3px solid var(--ink)}
.prx li{position:relative;min-width:0;padding:20px clamp(14px,1.6vw,24px) 0 0}
.prx li+li{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid var(--line)}
.prx__n{display:block;margin-bottom:14px;font-size:clamp(56px,6vw,96px);font-weight:800;line-height:.85;letter-spacing:-.06em;color:#E8A96A}
.prx li:last-child .prx__n{color:var(--orange)}
.prx h3{margin:0 0 8px;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em}
.prx p{margin:0;font-size:14.5px;line-height:1.55;color:#4A4642}
.pr__link{margin:clamp(28px,3vw,44px) 0 0}
.pr__link a{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
@media (max-width:1000px){.prx{grid-template-columns:minmax(0,1fr)}.prx li,.prx li+li{display:grid;grid-template-columns:clamp(72px,18vw,110px) minmax(0,1fr);column-gap:16px;padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}.prx__n{grid-row:span 2;margin:0;font-size:clamp(48px,13vw,72px)}.prx h3{align-self:end}}

/* ---------- Faire le point : bande d’appel ---------- */
.s-pt{scroll-margin-top:90px;padding:clamp(40px,5vw,72px) 0 clamp(84px,10vw,120px);background:#fff}
.ptx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4.4vw,64px);border-radius:34px;background:linear-gradient(135deg,#FDF0DF 0%,#FBE3C7 100%)}
.ptx__head{min-width:0}
.ptx__head p:not(.eyebrow){margin:14px 0 0;font-size:16.5px;line-height:1.6;color:#4A4642}
.ptx__q{min-width:0;margin:0;padding:0;list-style:none}
.ptx__q li{padding:12px 0;border-bottom:1px solid rgba(160,90,20,.18);font-size:clamp(17px,1.5vw,20px);font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.ptx__q li:last-child{border-bottom:0}
.ptx__cta{grid-column:1 / -1;margin:0}
@media (max-width:900px){.ptx{grid-template-columns:minmax(0,1fr);border-radius:24px}.ptx__cta .btn{width:100%;justify-content:center}}

/* ---------- Réassurance ---------- */
.s-rs{padding:clamp(36px,4vw,56px) 0;background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px}
.rs__proof{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:#5C554E}
.rs__proof img{width:60px;height:auto}
.rs__proof b{display:block;font-size:16px;color:var(--ink)}
.rs__links{margin:0;font-size:14.5px;color:#5C554E}
.rs__links a{color:var(--ink);font-weight:700}

/* ---------- V1.2 : trois enjeux sur la trajectoire ---------- */
.mx__stakes{position:relative;align-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0 clamp(10px,1.4vw,22px);list-style:none}
.mx__stakes::before{content:"";position:absolute;left:0;right:0;top:15px;height:3px;background:linear-gradient(90deg,#D9CEC0,var(--orange) 80%)}
.mx__stakes li{position:relative;min-width:0;padding:46px clamp(8px,1vw,16px) 0;text-align:center}
.mx__stakes li::before{content:"";position:absolute;left:50%;top:4px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.mx__stakes b{display:block;margin-bottom:6px;font-size:clamp(15.5px,1.25vw,18px);letter-spacing:-.015em;color:var(--ink)}
.mx__stakes span{display:block;font-size:13.5px;line-height:1.45;color:#5C554E}
.mx__d--from{color:#7A736B}
@media (max-width:1000px){
  .mx__stakes{grid-template-columns:minmax(0,1fr);padding:12px 0 12px 46px}
  .mx__stakes::before{left:21px;right:auto;top:0;bottom:0;width:3px;height:auto;background:linear-gradient(180deg,#D9CEC0,var(--orange))}
  .mx__stakes li{padding:8px 0;text-align:left}
  .mx__stakes li::before{left:-35px;top:10px;margin:0;width:18px;height:18px}
  .mx__stakes span{font-size:13.5px}
}
@media (max-width:600px){
  .mx__end{padding:16px 18px}
  .mx__t{font-size:17px;margin-bottom:4px}
  .mx__d{font-size:14px}
  .mx__stakes b{font-size:15.5px;margin-bottom:2px}
}
/* ---------- V1.2 : ce qui est étudié, défini, vérifié à chaque étape ---------- */
.prx__out{margin:12px 0 0 !important;padding-top:10px;border-top:1px dashed #E3D6C4;font-size:14px !important;line-height:1.45;color:#3E3A36 !important}
.prx__out b{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-ink)}
@media (max-width:1000px){.prx__out{grid-column:2}}
.pr__note{margin:clamp(28px,3vw,44px) 0 0;max-width:80ch;font-size:15px;line-height:1.6;color:#5C554E}
.pr__note a{margin-left:6px;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
/* ---------- V1.2 : Pourquoi IT Project, temps fort ---------- */
.s-wh{padding:clamp(90px,11vw,140px) 0;background:radial-gradient(60% 70% at 100% 0%,rgba(243,154,46,.14),rgba(243,154,46,0) 60%),var(--ivory)}
.wh__top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.wh__h{min-width:0}
.wh__title{font-size:clamp(32px,3.8vw,56px);line-height:1.04;letter-spacing:-.04em;margin:0}
.wh__badge{display:flex;align-items:center;gap:16px;margin:0;justify-self:end;padding:18px 22px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -40px rgba(120,60,0,.45);font-size:14px;color:#5C554E}
.wh__badge img{width:84px;height:auto}
.wh__badge b{display:block;font-size:17px;color:var(--ink)}
.wh{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:3px solid var(--ink)}
.wh li{min-width:0;padding:24px clamp(16px,2vw,30px) 0 0}
.wh li+li{padding-left:clamp(16px,2vw,30px);border-left:1px solid #E3D6C4}
.wh__v{margin:0 0 12px;font-size:clamp(34px,3.6vw,54px);font-weight:800;line-height:.95;letter-spacing:-.05em;color:var(--orange-deep)}
.wh li p:not(.wh__v){margin:0;font-size:15.5px;line-height:1.6;color:#3E3A36}
.wh li a{display:inline-block;margin-top:8px;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
.wh__foot{margin:clamp(30px,3.6vw,52px) 0 0;max-width:80ch;font-size:15.5px;line-height:1.6;color:#4A4642}
.wh__foot a{font-weight:800;color:var(--ink)}
@media (max-width:1000px){.wh__top{grid-template-columns:minmax(0,1fr)}.wh__badge{justify-self:start}.wh{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}.wh li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.wh{grid-template-columns:minmax(0,1fr)}.wh li,.wh li+li{padding:20px 0 0;border-left:0}.wh li+li{border-top:1px solid #E3D6C4;margin-top:4px}.wh__v{font-size:clamp(34px,11vw,44px)}.wh__badge{padding:14px 16px}.wh__badge img{width:64px}}
/* V1.2 : trajectoire compacte sur mobile (les titres des extrémités suffisent ; les enjeux gardent leurs précisions) */
@media (max-width:600px){
  .mx__end .mx__d{display:none}
  .mx__end .mx__t{margin:0}
  .mx__end{padding:14px 18px}
  .mx__stakes{padding:8px 0 8px 46px}
  .mx__stakes li{padding:6px 0}
}

/* ---------- V1.36 : schéma « Aujourd’hui → Demain » refait (cartes fermées, ligne reliant les deux cartes en leur milieu) ---------- */
.mx__end--from{border:1.5px solid #E3D6C4;border-radius:22px;background:rgba(255,255,255,.72)}
.mx__end--to{border:1.5px solid var(--orange);border-radius:22px}
@media (min-width:1001px){
  .mx__end{display:flex;flex-direction:column;justify-content:center}
  .mx__stakes{align-self:stretch;padding:0 clamp(4px,.8vw,12px)}
  .mx__stakes::before{top:50%;margin-top:-1.5px;left:0;right:0}
  .mx__stakes li{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:0 clamp(8px,1vw,16px)}
  .mx__stakes li::before{position:relative;z-index:1;grid-row:2;left:auto;top:auto;margin:12px 0}
  .mx__stakes li b{grid-row:1;align-self:end;margin:0}
  .mx__stakes li span{grid-row:3;align-self:start}
}
@media (max-width:1000px){
  .mx__end--from{border:1.5px solid #E3D6C4;border-radius:20px}
  .mx__end--to{border:1.5px solid var(--orange);border-radius:20px}
  .mx__stakes::before{left:19px}
}

/* ---------- V1.36 : « Qui gère quoi ? » : bulles centrées sur la barre ---------- */
@media (min-width:861px){.qf__modes>div::before{top:-29px}}
@media (max-width:860px){.qf__modes>div::before,.qf__modes>div:nth-child(1)::before,.qf__modes>div:nth-child(2)::before,.qf__modes>div:nth-child(3)::before{left:-44px}}