/* ==========================================================================
   EXPERTISES — la porte d'entrée des quatre métiers.
   01 quatre grandes entrées, chacune avec une scène qui raconte le travail
      (un logo naît · une maquette devient un site · un planning se remplit et
      le bon signé devient la facture · un plateau devient un extrait vertical)
   02 le fil d'un même projet (lien visuel vers l'exemple complet)
   03 l'aiguillage « par où commencer »
   04 questions.
   Les scènes sont dessinées en SVG (viewBox 320 × 200, scène en 16:10) : état
   final = état normal ; les animations ne jouent qu'avec html.js, hors ?calage,
   hors animations réduites, et ne démarrent qu'à l'apparition (.is-in posé
   par reveal.js). Le module xp-scenes.js ajoute .is-live (scène à l'écran)
   et l'inclinaison au pointeur.
   ========================================================================== */
body[data-page="expertises"]{
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-pop:cubic-bezier(.34,1.4,.64,1);
}

/* ---------- 01 · LES QUATRE ENTRÉES ------------------------------------------ */
.xps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));margin-top:max(calc(var(--mins) * 34px),calc(24 * var(--m)))}
.xp{position:relative;display:flex;flex-direction:column;min-width:0;color:inherit;border:1px solid var(--line-2);background:linear-gradient(180deg,#0b0b0c,#080809);isolation:isolate;transition:border-color .45s var(--ease),box-shadow .6s var(--ease)}
.xp::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:2px;background:var(--red);z-index:3;transition:width .6s var(--e-out)}
.xp:hover,.xp:focus-visible{border-color:rgba(246,43,62,.55);box-shadow:0 30px 70px -40px rgba(0,0,0,.9),0 0 60px -30px rgba(246,43,62,.55)}
.xp:hover::before,.xp:focus-visible::before{width:120px}
/* une carte = la scène, puis l'icône du métier (à la place du numéro), le nom et une phrase */
.xp__body{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));padding:max(calc(var(--mins) * 22px),calc(15 * var(--m))) max(calc(var(--mins) * 22px),calc(17 * var(--m))) max(calc(var(--mins) * 24px),calc(16 * var(--m)))}
.xp__ico{--ico-size:clamp(72px,calc(56 * var(--m)),104px);grid-row:1 / 3}
.xp__title{grid-column:2;align-self:end;padding-right:max(calc(var(--mins) * 54px),calc(34 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 30px),calc(24 * var(--m)));line-height:.92;text-transform:uppercase;letter-spacing:-.005em;-webkit-text-stroke:.01em currentColor;color:var(--ink)}
.xp__title span{color:var(--red)}
.xp__text{grid-column:2;align-self:start;margin-top:max(calc(var(--mins) * 10px),calc(7 * var(--m)));max-width:46ch;font-size:max(calc(var(--mins) * 15px),calc(7.2 * var(--m)));line-height:1.6;color:var(--ink-2)}
.xp__go{position:absolute;right:max(calc(var(--mins) * 20px),calc(15 * var(--m)));top:max(calc(var(--mins) * 22px),calc(15 * var(--m)))}
.xp:hover .xp__go,.xp:focus-visible .xp__go{border-color:var(--red);box-shadow:0 0 16px -2px var(--red-glow);background:rgba(246,43,62,.12)}
.xp:hover .xp__go svg{transform:translateX(2px)}

/* ---------- la scène (16:10, coordonnées SVG 320 × 200) ------------------------ */
.xps{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;perspective:1100px;border-bottom:1px solid var(--line);
  background:radial-gradient(70% 80% at 62% 58%,rgba(150,12,26,.2),transparent 70%),linear-gradient(180deg,#0d0d0e,#070708)}
.xps__world{position:absolute;inset:0;transform-style:preserve-3d}
.xps__world > *{position:absolute}
.xps__svg{inset:0;width:100%;height:100%;overflow:visible}
.xps__z0,.xps__z1,.xps__z2{transform:translateZ(0);transition:transform .7s var(--e-out)}
.xp:hover .xps__z1{transform:translateZ(14px)}
.xp:hover .xps__z2{transform:translateZ(38px)}
.xps .d{fill:none;stroke-dasharray:1;stroke-dashoffset:0}

/* légende des étapes, en haut à gauche */
/* la légende raconte la scène : police des titres, lisible (16 à 18 px sur ordinateur) */
.xps__legend{position:absolute;z-index:4;left:4.4%;top:4.2%;display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;font-family:var(--f-title);font-weight:700;font-size:clamp(14px,3.1cqw,18px);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.xps__legend li{display:flex;align-items:center;gap:.6em}
.xps__legend li::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.7)}
.xps__legend li:not(:last-child)::after{content:"";width:1.6em;height:1px;margin:0 .7em 0 .1em;background:rgba(255,255,255,.3)}
.xps__demo{position:absolute;z-index:4;left:4.4%;bottom:2.2%;display:flex;align-items:center;gap:.7em;font-family:var(--f-mono);font-weight:500;font-size:clamp(10px,1.9cqw,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.xps__demo::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--yellow)}

/* 01 · un logo naît ---------------------------------------------------------------- */
.xps__grid .d{stroke:rgba(255,255,255,.055);stroke-width:.35}
.xps__cons{opacity:.4;transition:opacity .6s var(--ease)}
.xps__cons .d{stroke:rgba(245,243,238,.8);stroke-width:.45}
.xps__cons circle.d:first-child{stroke:rgba(246,43,62,.95);stroke-width:.6}
.xps__pts{opacity:0;transition:opacity .5s var(--ease)}
.xps__pts .h{stroke:rgba(246,43,62,.9);stroke-width:.45;fill:none}
.xps__pts .p rect{fill:#060606;stroke:#f5f3ee;stroke-width:.5}
.xps__pts .p--end circle{fill:#f62b3e}
.xp:hover .xps__cons{opacity:.95}
.xp:hover .xps__pts{opacity:1}
.xps__ink{left:20.625%;top:20.1%;width:38.75%;overflow:hidden}
.xps__ink img{display:block;width:100%;height:auto;clip-path:inset(0 0 0 0)}
.xps__scan{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent 86%,rgba(246,43,62,.28) 97%,#ff8a95 99.4%,#fff 100%)}
.xps__sup{transform-box:fill-box;transform-origin:center}

/* 02 · la maquette devient l'écran, puis le téléphone ------------------------------- */
.xps__win{left:6.25%;top:13%;width:71.875%;border:1px solid rgba(255,255,255,.16);border-radius:3px;background:#0c0c0d;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.95),0 0 50px -26px rgba(246,43,62,.45)}
.xps__bar{display:flex;align-items:center;gap:.9cqw;height:2.5cqw;padding:0 1.6cqw;background:#141416;border-bottom:1px solid var(--line)}
.xps__bar i{width:.9cqw;height:.9cqw;border-radius:50%;background:#34343a}
.xps__bar i:first-child{background:rgba(246,43,62,.75)}
.xps__view{position:relative;overflow:hidden}
.xps__shot{display:block;width:100%;height:auto;clip-path:inset(0 0 0 0)}
.xps__wire{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s var(--ease)}
.xps__wire .d{stroke:rgba(245,243,238,.75);stroke-width:2.6}
.xps__wire .d--x{stroke:rgba(245,243,238,.22)}
.xp:hover .xps__wire{opacity:.55}
.xps__phone{left:76.25%;top:29%;width:17.5%;padding:.5cqw;border-radius:2.6cqw;background:#151517;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 40px -14px rgba(0,0,0,.95),0 0 40px -18px rgba(246,43,62,.5)}
.xps__phone img{display:block;width:100%;height:auto;border-radius:2.1cqw}

/* 03 · le planning, le bon signé, la facture --------------------------------------- */
.xps__t{font-family:var(--f-mono);font-weight:500;font-size:5.2px;letter-spacing:.14em;fill:var(--ink)}
.xps__t--s{font-size:4.1px;letter-spacing:.1em}
.xps__t--dim{fill:var(--ink-3)}
.xps__days text{font-family:var(--f-mono);font-size:4px;letter-spacing:.1em;fill:var(--ink-3);text-anchor:middle}
.xps__cal .d{stroke:rgba(255,255,255,.08);stroke-width:.4}
.xps__jobs .j rect:first-child{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.12);stroke-width:.4}
.xps__jobs .j path{stroke:rgba(245,243,238,.6);stroke-width:1.4}
.xps__jobs .j .l{fill:rgba(245,243,238,.42)}
.xps__jobs .j--r rect:first-child{fill:rgba(246,43,62,.2);stroke:rgba(246,43,62,.45)}
.xps__jobs .j--r path{stroke:#f62b3e}
.xps__jobs .j{transform-box:fill-box}
.xps__sign{stroke:#f5f3ee;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.xps__bill text{text-anchor:middle;fill:#ff8a95}
.xps__ok,.xps__bill{transform-box:fill-box;transform-origin:center}

/* 04 · plateau, montage, extrait vertical ------------------------------------------ */
.xps__cam{left:5%;top:15%;width:61.875%;border:1px solid rgba(255,255,255,.14);border-radius:2px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.95)}
.xps__cam img{display:block;width:100%;height:auto}
.xps__ruler .d{stroke:rgba(255,255,255,.18);stroke-width:.4}
.xps__wave rect{fill:rgba(245,243,238,.62);transform-box:fill-box;transform-origin:center}
.xps__clips rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.16);stroke-width:.4}
.xps__clips .c--r{fill:rgba(246,43,62,.22);stroke:#f62b3e}
.xps__crop{fill:rgba(246,43,62,.06);stroke:#f62b3e;stroke-width:.9}
.xps__proj{stroke:rgba(246,43,62,.55);stroke-width:.45}
.xps__vert{left:71.875%;top:12%;width:21.875%;border-radius:1.8cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(246,43,62,.55),0 24px 44px -16px rgba(0,0,0,.95),0 0 40px -14px rgba(246,43,62,.6)}
.xps__vert img{display:block;width:100%;height:auto}

/* ---------- ANIMATIONS DES SCÈNES ------------------------------------------------------ */
@keyframes xpDraw{from{stroke-dashoffset:1}}
@keyframes xpSign{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}}
@keyframes xpFade{from{opacity:0}}
@keyframes xpPop{from{opacity:0;scale:0}}
@keyframes xpScaleX{from{scale:0 1}}
@keyframes xpScaleY{from{scale:1 0}}
@keyframes xpSlide{from{opacity:0;translate:-10px 0}}
@keyframes xpLift{from{opacity:0;translate:0 7px}}
@keyframes xpCard{from{opacity:0;scale:.82;translate:0 8px}}
@keyframes xpDepth{from{opacity:0;translate:0 0 -240px;rotate:x 16deg}}
@keyframes xpDepthR{from{opacity:0;translate:30px 0 -280px;rotate:y -34deg}}
@keyframes xpDepthL{from{opacity:0;translate:-30px 0 -260px;rotate:y 30deg}}
@keyframes xpWipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes xpScan{0%{translate:-100% 0;opacity:1}88%{opacity:1}100%{translate:0 0;opacity:0}}
@keyframes xpDim{from{opacity:1}}
@keyframes xpShow{from{opacity:1}}
@keyframes xpPts{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes xpLit{from{color:rgba(245,243,238,.5)}}
@keyframes xpLitDot{from{background:rgba(255,255,255,.18);box-shadow:none}}
@keyframes xpHead{to{translate:198px 0}}

/* la scène rejoue (xp-scenes.js, data-xp-loop) : fondu de sortie, retour à zéro, nouvelle lecture */
.xps :is(.xps__world,.xps__legend,.xps__demo){transition:opacity .5s var(--ease)}
.xps.is-out :is(.xps__world,.xps__legend,.xps__demo){opacity:0}
.xps.is-replay *,.xps.is-replay *::before,.xps.is-replay *::after{animation:none!important}

@media (prefers-reduced-motion:no-preference){
  /* tout attend l'apparition de la scène */
  html.js:not(.calage) .xps:not(.is-in) *,html.js:not(.calage) .xps:not(.is-in) *::before,html.js:not(.calage) .xps:not(.is-in) *::after{animation-play-state:paused!important}
  html.js:not(.calage) .xps .d{animation:xpDraw 1.1s var(--e-io) var(--dl,.2s) backwards}
  html.js:not(.calage) .xps__legend li{animation:xpLit .5s var(--ease) var(--dl,0s) backwards}
  html.js:not(.calage) .xps__legend li::before{animation:xpLitDot .5s var(--ease) var(--dl,0s) backwards}

  /* 01 */
  html.js:not(.calage) .xps__grid{animation:xpFade 1.2s var(--ease) .1s backwards}
  html.js:not(.calage) .xps__grid .d{animation-duration:1.4s;--dl:.1s}
  html.js:not(.calage) .xps__cons{animation:xpDim .9s var(--ease) 2.9s backwards}
  html.js:not(.calage) .xps__pts{animation:xpPts 2s linear 1.55s backwards}
  html.js:not(.calage) .xps__pts .p rect,html.js:not(.calage) .xps__pts .p circle{transform-box:fill-box;transform-origin:center;animation:xpPop .45s var(--e-pop) var(--dl) backwards}
  html.js:not(.calage) .xps__pts .p--end circle{animation-delay:1.95s}
  html.js:not(.calage) .xps__pts .hx{transform-box:fill-box;transform-origin:center;animation:xpScaleX .5s var(--e-out) 1.75s backwards}
  html.js:not(.calage) .xps__pts .hy{transform-box:fill-box;transform-origin:center;animation:xpScaleY .5s var(--e-out) 1.75s backwards}
  html.js:not(.calage) .xps--id .xps__ink img{animation:xpWipe 1.1s var(--e-io) 2.25s backwards}
  html.js:not(.calage) .xps--id .xps__scan{animation:xpScan 1.1s var(--e-io) 2.25s backwards}
  html.js:not(.calage) .xps__sup{animation:xpCard .8s var(--e-out) var(--dl) backwards}

  /* 02 */
  html.js:not(.calage) .xps__win{animation:xpDepth 1s var(--e-out) .1s backwards}
  html.js:not(.calage) .xps__wire{animation:xpShow .6s var(--ease) 2.8s backwards}
  html.js:not(.calage) .xps__shot{animation:xpWipe 1.1s var(--e-io) 1.85s backwards}
  html.js:not(.calage) .xps--web .xps__scan{animation:xpScan 1.1s var(--e-io) 1.85s backwards}
  html.js:not(.calage) .xps__phone{animation:xpDepthR 1.1s var(--e-out) 3s backwards}

  /* 03 */
  html.js:not(.calage) .xps--soft .xps__z1{animation:xpDepth .9s var(--e-out) .05s backwards}
  html.js:not(.calage) .xps__jobs .j{animation:xpSlide .6s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xps--soft .xps__z2{animation:xpDepthR 1s var(--e-out) 2.25s backwards}
  html.js:not(.calage) .xps .xps__sign{animation-name:xpSign;animation-duration:1s}
  html.js:not(.calage) .xps__ok{animation:xpPop .5s var(--e-pop) var(--dl) backwards}
  html.js:not(.calage) .xps__bill{animation:xpLift .6s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xps__demo{animation:xpFade .8s var(--ease) 1s backwards}

  /* 04 */
  html.js:not(.calage) .xps__cam{animation:xpDepth 1s var(--e-out) .05s backwards}
  html.js:not(.calage) .xps__wave rect{animation:xpScaleY .5s var(--e-out) calc(.6s + var(--i) * 14ms) backwards}
  html.js:not(.calage) .xps__clips rect{animation:xpSlide .55s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xps__headw{animation:xpFade .5s var(--ease) 1.6s backwards}
  html.js:not(.calage) .xps__head{animation:xpHead 9s linear 2s infinite}
  html.js:not(.calage) .xps:not(.is-live) .xps__head{animation-play-state:paused}
  html.js:not(.calage) .xps .xps__crop{animation-duration:.9s}
  html.js:not(.calage) .xps__vert{animation:xpDepthL 1.1s var(--e-out) 3.05s backwards}
}

/* ---------- 02 · LE FIL D'UN MÊME PROJET ------------------------------------------ */
.xfil-blk{padding-top:0}
.xfil__link{display:block;color:inherit}
.xfil__row{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr) minmax(0,2.4fr) minmax(0,.6fr);align-items:center;gap:max(calc(var(--mins) * 26px),calc(22 * var(--m)));padding:max(calc(var(--mins) * 40px),calc(26 * var(--m))) 0 max(calc(var(--mins) * 10px),calc(8 * var(--m)))}
.xfil__wire{position:absolute;left:2%;right:4%;top:calc(50% + max(calc(var(--mins) * 15px),calc(9 * var(--m))));height:1px;background:linear-gradient(90deg,rgba(246,43,62,.2),var(--red) 30%,var(--red) 70%,rgba(246,43,62,.25));box-shadow:0 0 12px rgba(246,43,62,.55);transform-origin:left center}
.xfil__wire::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px rgba(255,214,10,.7)}
.xfil__node{position:relative;z-index:1;min-width:0;transition:translate .6s var(--e-out)}
.xfil__tag{position:absolute;left:0;bottom:calc(100% + max(calc(var(--mins) * 12px),calc(8 * var(--m))));display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 15px),calc(9.6 * var(--m)));line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.xfil__tag b{font-family:var(--f-mono);font-weight:500;font-size:.78em;letter-spacing:.08em;color:var(--red)}
.xfil__tile{display:grid;place-items:center;aspect-ratio:4/3;padding:14%;background:#26272C;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -24px rgba(0,0,0,.95),0 0 50px -30px rgba(234,110,30,.6)}
.xfil__tile img{width:100%;height:auto}
.xfil__pal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));aspect-ratio:1/1.05;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.xfil__pal li{background:var(--c);transform-origin:bottom center}
.xfil__node--site .frame img{transition:transform .9s var(--e-out)}
.xfil__node--mob .phone{border-width:5px;border-radius:20px;padding-top:0}   /* écran plein (10/10) */
.xfil__node--mob .phone::before{--cam-top:3px;--cam:4px}
.xfil__link:hover .xfil__node{translate:0 -6px}
.xfil__link:hover .xfil__node--pal{transition-delay:.05s}
.xfil__link:hover .xfil__node--site{transition-delay:.1s}
.xfil__link:hover .xfil__node--mob{transition-delay:.15s}
.xfil__link:hover .xfil__node--site .frame img{transform:scale(1.03)}
.xfil__link:hover .xfil__wire{box-shadow:0 0 18px rgba(246,43,62,.85)}
.xfil__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 30px;margin-top:max(calc(var(--mins) * 26px),calc(18 * var(--m)));padding-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));border-top:1px solid var(--line-2)}
.xfil__txt{max-width:60ch;font-size:max(calc(var(--mins) * 15px),calc(7 * var(--m)));line-height:1.6;color:var(--ink-2)}
.xfil__foot .more{margin-top:0}
.xfil__pal li:nth-child(2){--n:1}.xfil__pal li:nth-child(3){--n:2}.xfil__pal li:nth-child(4){--n:3}

@keyframes xfGrow{from{scale:0 1}}
@keyframes xfDot{from{opacity:0}}
@keyframes xfNode{from{opacity:0;translate:0 18px;scale:.94}}
@keyframes xfStrip{from{scale:1 0}}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.calage) .xfil__link:not(.is-in) *,html.js:not(.calage) .xfil__link:not(.is-in) *::after{animation-play-state:paused!important}
  html.js:not(.calage) .xfil__wire{animation:xfGrow 1.7s var(--e-io) .15s backwards}
  html.js:not(.calage) .xfil__wire::after{animation:xfDot .4s var(--ease) 1.7s backwards}
  html.js:not(.calage) .xfil__node{animation:xfNode .9s var(--e-out) var(--dl) backwards}
  html.js:not(.calage) .xfil__pal li{animation:xfStrip .6s var(--e-out) calc(.8s + var(--n,0) * 90ms) backwards}
}

/* ---------- 03 · PAR OÙ COMMENCER : la situation mène au métier -------------------- */
.xroutes{margin-top:max(calc(var(--mins) * 30px),calc(22 * var(--m)));border-top:1px solid var(--line-2)}
.xr{position:relative;display:grid;grid-template-columns:max(calc(var(--mins) * 56px),calc(36 * var(--m))) minmax(0,1.25fr) minmax(60px,1fr) max(calc(var(--mins) * 230px),calc(150 * var(--m)));align-items:center;column-gap:max(calc(var(--mins) * 20px),calc(16 * var(--m)));padding:max(calc(var(--mins) * 22px),calc(14 * var(--m))) 0;border-bottom:1px solid var(--line-2);color:inherit;transition:background-color .4s var(--ease)}
.xr::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--red);transition:width .5s var(--e-out)}
.xr:hover,.xr:focus-visible{background:linear-gradient(90deg,rgba(246,43,62,.07),transparent 75%)}
.xr:hover::before{width:90px}
.xr > .ico{--ico-size:max(calc(var(--mins) * 52px),calc(34 * var(--m)))}
.xr__sit{display:block;min-width:0}
.xr__title{display:block;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 24px),calc(15.5 * var(--m)));line-height:.95;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.xr__txt{display:block;margin-top:max(calc(var(--mins) * 7px),calc(4.5 * var(--m)));font-size:max(calc(var(--mins) * 14px),calc(6.5 * var(--m)));line-height:1.5;color:var(--ink-3)}
.xr__wire{position:relative;height:1px;background:var(--line-2)}
.xr__wire::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,43,62,.25),var(--red));transform-origin:left center;transition:box-shadow .4s var(--ease)}
.xr__wire::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red);transform:rotate(45deg);transition:translate .45s var(--e-out)}
.xr:hover .xr__wire::before{box-shadow:0 0 10px rgba(246,43,62,.8)}
.xr:hover .xr__wire::after{translate:4px 0}
.xr__to{display:flex;align-items:center;gap:12px;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.5 * var(--m)));line-height:1;text-transform:uppercase;color:var(--ink-2);transition:color .35s var(--ease)}
.xr__to .ico{width:max(calc(var(--mins) * 30px),calc(19 * var(--m)));height:max(calc(var(--mins) * 30px),calc(19 * var(--m)));color:var(--red)}
.xr:hover .xr__to{color:#fff}
@keyframes xrGrow{from{scale:0 1}}
@keyframes xrHead{from{opacity:0;translate:-12px 0}}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.calage) .xroutes li:not(.is-in) .xr__wire::before,html.js:not(.calage) .xroutes li:not(.is-in) .xr__wire::after{animation-play-state:paused}
  html.js:not(.calage) .xr__wire::before{animation:xrGrow 1s var(--e-io) calc(.35s + var(--i,0) * 90ms) backwards}
  html.js:not(.calage) .xr__wire::after{animation:xrHead .5s var(--e-out) calc(1.1s + var(--i,0) * 90ms) backwards}
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width:1023px){
  .xps-grid{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .xp__body{padding:22px 22px 24px}
  .xp__title{font-size:clamp(28px,6vw,38px);padding-right:56px}
  .xp__go{right:20px;top:22px}
  .xfil__row{gap:18px;padding-top:44px}
  .xr{grid-template-columns:52px minmax(0,1fr) 60px auto;padding:22px 0}
}
@media (max-width:640px){
  .xp__body{padding:20px 18px 22px}
  .xfil__row{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:46px;column-gap:14px;padding-top:36px}
  .xfil__node--logo{grid-column:1 / span 4}
  .xfil__node--pal{grid-column:5 / span 3}
  .xfil__node--site{grid-column:1 / span 5}
  .xfil__node--mob{grid-column:6 / span 2}
  .xfil__wire{display:none}
  .xfil__tag{font-size:13px;letter-spacing:.03em}
  .xr{grid-template-columns:56px minmax(0,1fr);row-gap:12px;column-gap:16px;align-items:start}
  .xr > .ico{--ico-size:56px}
  .xp__body{column-gap:14px}
  .xp__ico{--ico-size:64px}
  .xr__wire{display:none}
  .xr__to{grid-column:2;font-size:18px}
  .xr__to::before{content:"";width:18px;height:1px;background:var(--red)}
}