/* Accueil, section 03 · Expertises (#expertises) : « les quatre dalles ».
   Chargé après home.css ; tout est limité à main.home #expertises et à
   html:not(.calage). Les états cachés ou animés sont écrits sous html.yn-fx
   (sans cette classe : état final, lisible, immobile). Les calques ajoutés
   dans les cartes (.xcard__edge, .xcard__sheen, .xcard__glare, .xcard__veil) sont créés par
   home/exp.js, jamais dans l'éditeur ni en ?calage.
   Unité : 1 u = 1 px d'une planche 1920 × 1080 posée en contain (SPEC-VITRINE § 3). */

/* Jetons d'échelle (--u, --pl, --pr, --xtra, --t-*) et de mouvement (--e-*,
   --tk, --lv) : contrat commun, posés par home.css (bloc « VAGUE 3 »). */

/* ==========================================================================
   (a) TAILLE ET COMPOSITION
   ========================================================================== */
/* éléments communs à toutes les tailles */
html:not(.calage) main.home #expertises .exp__title{margin:0}
html:not(.calage) main.home #expertises .xcard__num{font-size:var(--t-mono);line-height:1.6}
/* puce posée sur la première ligne (et non au milieu d'une puce sur deux lignes) */
html:not(.calage) main.home #expertises .xcard__list li::before{top:.875em;margin-top:-.26em}
/* rond fléché en haut à droite (la liste garde toute la largeur : plus de puce
   coupée) ; la flèche pointe vers le haut et se redresse au survol */
html:not(.calage) main.home #expertises .xcard__go svg{rotate:-45deg;transition:rotate var(--d-state,600ms) var(--ease-out),transform .35s var(--ease)}
html:not(.calage) main.home #expertises .xcard:is(:hover,:focus-visible) .xcard__go svg{rotate:0deg}
/* lueur rouge de la carte : derrière le visuel, au centre de la dalle */
html:not(.calage) main.home #expertises .xcard::before{background:radial-gradient(75% 50% at 66% 54%,rgba(246,43,62,.15),transparent 72%)}
/* le visuel ne glisse plus au survol par le CSS d'origine (avec les effets,
   exp.js le décale en parallaxe ; sans eux, il reste immobile) */
html:not(.calage):not(.yn-fx) main.home #expertises .xcard:hover .xcard__media{transform:none}

/* ---- ordinateur ---------------------------------------------------------- */
@media (min-width:1024px){
  html:not(.calage) main.home #expertises .exp__grid{padding:0 var(--pr) 0 var(--pl);row-gap:calc(40 * var(--u) + .2 * var(--xtra))}

  /* rangée 1 : étiquette + titre à gauche, intro à droite alignée sur le bas du titre */
  html:not(.calage) main.home #expertises .exp__intro{grid-template-columns:max-content minmax(0,calc(460 * var(--u)));grid-template-rows:auto auto;column-gap:calc(40 * var(--u));justify-content:space-between;align-items:end}
  html:not(.calage) main.home #expertises .exp__intro .sec__label{grid-column:1;grid-row:1;margin-bottom:calc(26 * var(--u) + .1 * var(--xtra))}
  html:not(.calage) main.home #expertises .exp__title{grid-column:1;grid-row:2;font-size:calc(104 * var(--u))}
  html:not(.calage) main.home #expertises .exp__intro .txt{grid-column:2;grid-row:1 / 3;align-self:end;max-width:none;margin:0 0 calc(4 * var(--u));font-size:var(--t-body);line-height:1.6;text-wrap:pretty}

  /* rangée 2 : quatre dalles */
  html:not(.calage) main.home #expertises .exp__cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24 * var(--u));perspective:calc(1600 * var(--u));perspective-origin:50% 30%}
  html:not(.calage) main.home #expertises .xcard{height:calc(580 * var(--u) + .8 * var(--xtra));min-height:0;padding:calc(34 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u))}
  html:not(.calage) main.home #expertises .xcard__title{margin-top:calc(12 * var(--u));font-size:calc(48 * var(--u));line-height:.98}
  html:not(.calage) main.home #expertises .xcard__list{padding-top:calc(16 * var(--u));padding-right:0}
  html:not(.calage) main.home #expertises .xcard__list li{padding-left:calc(20 * var(--u));font-size:var(--t-small);line-height:1.75}
  html:not(.calage) main.home #expertises .xcard__go{--d:max(40px,calc(56 * var(--u)));right:calc(26 * var(--u));top:calc(26 * var(--u));bottom:auto}

  /* visuels : dans la bande entre le titre de la carte et la liste, jamais sur le
     titre ; ils débordent à droite comme avant (proportions d'origine) et prennent
     le surplus vertical des écrans 16:10 */
  html:not(.calage) main.home #expertises .xcard--identity .xcard__media{width:calc(320 * var(--u) + .3 * var(--xtra));height:calc(320 * var(--u) + .3 * var(--xtra));right:calc(-8 * var(--u));top:calc(128 * var(--u) + .25 * var(--xtra));perspective:calc(800 * var(--u))}
  html:not(.calage) main.home #expertises .xcard--web .xcard__media{width:calc(350 * var(--u) + .3 * var(--xtra));right:calc(-92 * var(--u));top:calc(186 * var(--u) + .29 * var(--xtra))}
  html:not(.calage) main.home #expertises .xcard--software .xcard__media{width:calc(360 * var(--u) + .3 * var(--xtra));right:calc(-112 * var(--u));top:calc(206 * var(--u) + .31 * var(--xtra))}
  html:not(.calage) main.home #expertises .xcard--podcast .xcard__media{width:calc(136 * var(--u) + .12 * var(--xtra));right:calc(44 * var(--u));top:calc(178 * var(--u) + .28 * var(--xtra))}
}

/* 1024 à 1279 px : l'intro passe sous le titre (sa colonne serait trop étroite) */
@media (min-width:1024px) and (max-width:1279px){
  html:not(.calage) main.home #expertises .exp__intro{grid-template-columns:minmax(0,1fr);justify-content:start}
  html:not(.calage) main.home #expertises .exp__intro .txt{grid-column:1;grid-row:3;max-width:calc(1100 * var(--u));margin:calc(20 * var(--u)) 0 0}
}
/* 1024 à 1279 px et écran assez haut : 2 × 2 dalles en paysage, texte à gauche,
   visuel centré dans la moitié droite (la carte prend la hauteur de son texte) */
@media (min-width:1024px) and (max-width:1279px) and (min-height:740px){
  html:not(.calage) main.home #expertises .exp__grid{row-gap:calc(30 * var(--u) + .05 * var(--xtra))}
  html:not(.calage) main.home #expertises .exp__intro .txt{margin-top:calc(14 * var(--u))}
  html:not(.calage) main.home #expertises .exp__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(.calage) main.home #expertises .xcard{height:auto;min-height:calc(270 * var(--u) + .12 * var(--xtra));padding:calc(28 * var(--u)) calc(30 * var(--u)) calc(24 * var(--u))}
  html:not(.calage) main.home #expertises .xcard__title{margin-top:calc(8 * var(--u))}
  html:not(.calage) main.home #expertises .xcard__list{padding-top:calc(12 * var(--u))}
  html:not(.calage) main.home #expertises .xcard--identity .xcard__media{width:calc(280 * var(--u));height:calc(280 * var(--u));right:calc(40 * var(--u));top:50%;margin-top:calc(-140 * var(--u))}
  html:not(.calage) main.home #expertises .xcard--web .xcard__media{width:calc(375 * var(--u));right:calc(-70 * var(--u));top:50%;margin-top:calc(-118 * var(--u))}
  html:not(.calage) main.home #expertises .xcard--software .xcard__media{width:calc(395 * var(--u));right:calc(-110 * var(--u));top:50%;margin-top:calc(-104 * var(--u))}
  html:not(.calage) main.home #expertises .xcard--podcast .xcard__media{width:calc(120 * var(--u));right:calc(120 * var(--u));top:50%;margin-top:calc(-120 * var(--u))}
}

/* ---- téléphone et tablette (moins de 1024 px) : bande de cartes qui glisse */
@media (max-width:1023px){
  html:not(.calage) main.home #expertises .exp__intro .sec__label{margin-bottom:14px}
  html:not(.calage) main.home #expertises .exp__title{font-size:clamp(32px,calc(46 * var(--u)),60px)}
  html:not(.calage) main.home #expertises .exp__intro .txt{font-size:var(--t-body)}
  html:not(.calage) main.home #expertises .exp__cards{perspective:900px;perspective-origin:30% 40%}
  html:not(.calage) main.home #expertises .xcard{flex:0 0 78vw;height:clamp(260px,42svh,380px);min-height:0;padding:22px 20px 18px}
  html:not(.calage) main.home #expertises .xcard__title{margin-top:6px;font-size:30px;line-height:.98}
  html:not(.calage) main.home #expertises .xcard__list{padding-top:10px;padding-right:0}
  html:not(.calage) main.home #expertises .xcard__list li{padding-left:16px;font-size:14px;line-height:1.7}
  html:not(.calage) main.home #expertises .xcard__go{--d:44px;right:14px;top:14px;bottom:auto}
  /* visuels : dans la bande libre entre le titre et la liste, à droite ; la
     bande suit la hauteur de la carte (--bt : haut, --bh : hauteur) */
  html:not(.calage) main.home #expertises .xcard{--bt:max(70px,calc(100% - 250px));--bh:calc(100% - var(--bt) - 96px)}
  html:not(.calage) main.home #expertises .xcard--identity .xcard__media{top:calc(var(--bt) - 10px);height:calc(var(--bh) + 20px);width:auto;aspect-ratio:1;right:2%;perspective:600px}
  html:not(.calage) main.home #expertises .xcard--web .xcard__media{top:var(--bt);height:var(--bh);width:auto;right:-16%}
  html:not(.calage) main.home #expertises .xcard--software .xcard__media{top:calc(var(--bt) + 8px);height:calc(var(--bh) - 16px);width:auto;aspect-ratio:1200 / 695;right:-26%}
  html:not(.calage) main.home #expertises .xcard--podcast .xcard__media{top:calc(var(--bt) - 4px);height:calc(var(--bh) + 8px);width:auto;right:14%}
}
/* tablette en portrait (768 × 1024, 820 × 1180…) : deux grandes dalles à la fois,
   comme les cartes de l'ordinateur (titre en haut, objet au milieu, liste en bas),
   au lieu d'une bande de téléphone qui laissait le tiers bas de l'écran vide */
@media (min-width:600px) and (max-width:1023px) and (min-height:900px){
  html:not(.calage) main.home #expertises .xcard{flex:0 0 calc((100vw - 60px) / 2);height:clamp(400px,52svh,640px);padding:26px 24px 22px;
    --bt:128px;--bh:calc(100% - var(--bt) - 136px)}
  html:not(.calage) main.home #expertises .xcard__title{margin-top:8px;font-size:38px}
  html:not(.calage) main.home #expertises .xcard__list{padding-top:12px}
  html:not(.calage) main.home #expertises .xcard__list li{padding-left:18px;font-size:16px;line-height:1.7}
  html:not(.calage) main.home #expertises .xcard--identity .xcard__media{right:auto;left:50%;margin-left:calc((var(--bh) + 20px) / -2)}
  html:not(.calage) main.home #expertises .xcard--web .xcard__media{right:-24%}
  html:not(.calage) main.home #expertises .xcard--software .xcard__media{right:-38%}
  html:not(.calage) main.home #expertises .xcard--podcast .xcard__media{right:auto;left:50%;margin-left:calc((var(--bh) + 8px) * -.25)}
}
/* téléphones bas : la bande se resserre pour que la section tienne dans l'écran */
@media (max-width:1023px) and (max-height:760px){
  html:not(.calage) main.home #expertises .xcard{height:clamp(240px,39svh,300px)}
}
@media (max-width:1023px) and (max-height:700px){
  /* carte basse : le visuel monte à côté du titre et passe sous le haut de la liste */
  html:not(.calage) main.home #expertises .xcard{height:clamp(228px,36svh,280px);--bt:62px;--bh:calc(100% - 62px - 58px)}
  html:not(.calage) main.home #expertises .xcard--web .xcard__media{right:-8%}
  html:not(.calage) main.home #expertises .xcard--software .xcard__media{right:-14%}
}

/* ==========================================================================
   CALQUES DE LUMIÈRE (créés par exp.js) : arête haute, reflet, voile
   ========================================================================== */
html:not(.calage) main.home #expertises :is(.xcard__edge,.xcard__sheen,.xcard__glare,.xcard__veil){position:absolute;pointer-events:none}
/* arête haute : un filet de lumière et la lueur qu'il jette sur la carte
   (::before), un éclat qui court le long du bord (::after) */
html:not(.calage) main.home #expertises .xcard__edge{left:0;right:0;top:0;height:max(36px,calc(64 * var(--u)));z-index:4}
html:not(.calage) main.home #expertises .xcard__edge::before{content:"";position:absolute;inset:0;opacity:.25;
  background:
    linear-gradient(90deg,transparent,rgba(246,43,62,.95) 14%,#ffd9dc 50%,rgba(246,43,62,.95) 86%,transparent) 0 0 / 100% 2px no-repeat,
    radial-gradient(55% 100% at 50% 0,rgba(246,43,62,.22),transparent 100%);
  transition:opacity var(--d-hover,240ms) var(--ease)}
html:not(.calage) main.home #expertises .xcard__edge::after{content:"";position:absolute;top:0;left:0;width:34%;height:100%;opacity:0;
  background:
    linear-gradient(90deg,transparent,#fff 50%,transparent) 0 0 / 100% 2px no-repeat,
    radial-gradient(50% 70% at 50% 0,rgba(255,217,220,.42),rgba(246,43,62,.12) 55%,transparent 100%);
  transform:translate3d(-100%,0,0)}
/* lumière venue d'en haut sur la face de la dalle (visible tant qu'elle est
   couchée, elle s'éteint quand la dalle se dresse) : sous le texte */
html:not(.calage) main.home #expertises .xcard__sheen{inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(255,217,220,.2),rgba(246,43,62,.14) 38%,transparent 78%)}
/* reflet blanc qui suit le pointeur (déplacé par transform : rien à repeindre) */
html:not(.calage) main.home #expertises .xcard__glare{left:0;top:0;width:calc(760 * var(--u));height:calc(760 * var(--u));margin:calc(-380 * var(--u)) 0 0 calc(-380 * var(--u));z-index:3;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.08),rgba(255,255,255,.03) 45%,transparent);
  transition:opacity var(--d-hover,240ms) var(--ease)}
html:not(.calage) main.home #expertises .xcard__veil{inset:0;z-index:5;background:#060606;opacity:0;transition:opacity 420ms var(--ease)}
@media (max-width:1023px){
  html:not(.calage) main.home #expertises .xcard__glare{width:520px;height:520px;margin:-260px 0 0 -260px}
}

/* le sol : un filet de lumière au pied des dalles (elles s'y dressent) */
@media (min-width:1024px){
  html:not(.calage) main.home #expertises .exp__cards{position:relative}
  html:not(.calage) main.home #expertises .exp__cards::before,
  html:not(.calage) main.home #expertises .exp__cards::after{content:"";position:absolute;left:calc(-60 * var(--u));right:calc(-60 * var(--u));pointer-events:none}
  html:not(.calage) main.home #expertises .exp__cards::after{bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(246,43,62,.6) 18%,rgba(255,217,220,.75) 50%,rgba(246,43,62,.6) 82%,transparent)}
  html:not(.calage) main.home #expertises .exp__cards::before{bottom:calc(-46 * var(--u));height:calc(92 * var(--u));
    background:radial-gradient(50% 50% at 50% 50%,rgba(246,43,62,.16),transparent 100%)}
}

/* survol, focus clavier, carte au centre de la bande (doigt) : l'arête s'allume */
html:not(.calage) main.home #expertises .xcard:is(:hover,:focus-visible,.is-focus) .xcard__edge::before{opacity:1}
html:not(.calage) main.home #expertises .xcard.is-tilt .xcard__glare{opacity:1}
/* les autres cartes s'effacent (calque sombre, pas de filtre) */
html:not(.calage) main.home #expertises .xcard.is-dim .xcard__veil{opacity:.35}

/* ==========================================================================
   (b) ARRIVÉE · (c) AMBIANCE · (e) DÉPART  (sous html.yn-fx seulement)
   T0 = .st-in (posée par sections.js) ; durées et décalages × --tk (0,6 dès
   la 2e visite). --k = rang de la carte (0 à 3).
   ========================================================================== */
html.yn-fx main.home #expertises .xcard{--k:calc(var(--i,1) - 1);transform-origin:50% 100%}
html.yn-fx main.home #expertises .xcard__list li:nth-child(1){--j:0}
html.yn-fx main.home #expertises .xcard__list li:nth-child(2){--j:1}
html.yn-fx main.home #expertises .xcard__list li:nth-child(3){--j:2}
html.yn-fx main.home #expertises .xcard__list li:nth-child(n+4){--j:3}

/* --- avant T0 : tout est à plat dans le sol, éteint --------------------- */
html.yn-fx main.home #expertises:not(.st-in) .xcard.rv{opacity:0;transform:translate3d(0,0,calc(-80 * var(--u))) rotateX(80deg);transition:none}
html.yn-fx main.home #expertises:not(.st-in) :is(.xcard__media,.xcard__list li,.xcard__go){opacity:0}
html.yn-fx main.home #expertises:not(.st-in) .xcard__edge{opacity:0}
html.yn-fx main.home #expertises:not(.st-in) .exp__cards::after{transform:scaleX(0)}
html.yn-fx main.home #expertises:not(.st-in) .exp__cards::before{opacity:0}

/* --- T0 : le sol s'allume du centre vers les bords (le cadre d'abord) ---- */
html.yn-fx main.home #expertises .exp__cards::after{transition:transform calc(900ms * var(--tk,1)) var(--e-io,cubic-bezier(.65,0,.35,1)) calc(60ms * var(--tk,1))}
html.yn-fx main.home #expertises .exp__cards::before{transition:opacity calc(1200ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc(300ms * var(--tk,1))}

/* --- T0 : les dalles se dressent depuis le sol --------------------------- */
html.yn-fx main.home #expertises.st-in .xcard.rv{opacity:1;transform:none;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
  animation:
    xsRise calc(1150ms * var(--tk,1)) var(--e-spring,cubic-bezier(.34,1.25,.64,1)) calc((300ms + var(--k) * 90ms) * var(--tk,1)) backwards,
    xsFade calc(520ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc((300ms + var(--k) * 90ms) * var(--tk,1)) backwards}
@keyframes xsRise{from{transform:translate3d(0,0,calc(-80 * var(--u))) rotateX(80deg)}}
/* la face couchée prend la lumière, puis s'éteint en se dressant */
html.yn-fx main.home #expertises.st-in .xcard__sheen{
  animation:xsSheen calc(1150ms * var(--tk,1)) var(--e-io,cubic-bezier(.65,0,.35,1)) calc((300ms + var(--k) * 90ms) * var(--tk,1)) backwards}
@keyframes xsSheen{0%{opacity:1}35%{opacity:.85}100%{opacity:0}}
@keyframes xsFade{from{opacity:0}}

/* le visuel sort de la profondeur (carte + 150 ms), puis flotte (ambiance) */
html.yn-fx main.home #expertises .xcard__media{transition:filter .6s var(--ease);
  transform:perspective(calc(800 * var(--u))) translate3d(var(--px,0px),var(--py,0px),0)}
html.yn-fx main.home #expertises.st-in .xcard__media{
  animation:
    xsMedia calc(900ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc((450ms + var(--k) * 90ms) * var(--tk,1)) backwards,
    xsFloat var(--fl,7s) ease-in-out calc((1500ms + var(--k) * 90ms) * var(--tk,1)) infinite}
html.yn-fx main.home #expertises .xcard--web{--fl:8.5s}
html.yn-fx main.home #expertises .xcard--software{--fl:9.5s}
html.yn-fx main.home #expertises .xcard--podcast{--fl:11s}
@keyframes xsMedia{
  from{opacity:0;transform:perspective(calc(800 * var(--u))) translate3d(0,0,calc(-140 * var(--u))) scale(.88)}
  to{opacity:1;transform:perspective(calc(800 * var(--u))) translate3d(0,0,0) scale(1)}}
@keyframes xsFloat{
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:0 calc(-6 * var(--u));rotate:1deg}
  75%{translate:0 calc(6 * var(--u));rotate:-1deg}}
/* la carte d'identité tourne doucement sur elle-même (12 s) */
html.yn-fx main.home #expertises.st-in .idcard{animation:xsSway 12s ease-in-out calc(1600ms * var(--tk,1)) infinite}
@keyframes xsSway{0%,100%{rotate:y 0deg}25%{rotate:y 10deg}75%{rotate:y -10deg}}

/* les puces montent une à une (carte + 300 + j × 60 ms), puis le rond fléché se pose */
html.yn-fx main.home #expertises.st-in .xcard__list li{
  animation:xsUp calc(500ms * var(--tk,1)) var(--e-out,cubic-bezier(.16,1,.3,1)) calc((600ms + var(--k) * 90ms + var(--j,0) * 60ms) * var(--tk,1)) backwards}
@keyframes xsUp{from{opacity:0;translate:0 calc(10 * var(--u))}}
html.yn-fx main.home #expertises.st-in .xcard__go{
  animation:xsPop calc(500ms * var(--tk,1)) var(--e-pop,cubic-bezier(.34,1.4,.64,1)) calc((900ms + var(--k) * 90ms) * var(--tk,1)) backwards}
@keyframes xsPop{from{opacity:0;scale:.6}}

/* l'arête haute prend la lumière (carte + 620 ms) : 0 → 1 → 0,25, un éclat court */
html.yn-fx main.home #expertises.st-in .xcard__edge::before{
  animation:xsEdge calc(500ms * var(--tk,1)) var(--e-io,cubic-bezier(.65,0,.35,1)) calc((920ms + var(--k) * 90ms) * var(--tk,1)) backwards}
@keyframes xsEdge{0%{opacity:0}40%{opacity:1}100%{opacity:.25}}
/* éclat : une seule animation (deux sur le même calque ne passeraient plus par
   le compositeur) : son premier passage est celui de l'arrivée, puis une vague
   de gauche à droite toutes les 10 s sur les quatre arêtes */
html.yn-fx main.home #expertises.st-in .xcard__edge::after{
  animation:xsWave 10s linear calc((920ms + var(--k) * 90ms) * var(--tk,1)) infinite}
@keyframes xsWave{
  0%{opacity:0;transform:translate3d(-100%,0,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  1.2%{opacity:1}
  5.6%{opacity:1}
  7%{opacity:0;transform:translate3d(360%,0,0)}
  100%{opacity:0;transform:translate3d(360%,0,0)}}

/* ambiance : seulement sur la section active ; les visuels se figent au survol */
html.yn-fx main.home #expertises:not(.is-current) .xcard__media,
html.yn-fx main.home #expertises:not(.is-current) .idcard,
html.yn-fx main.home #expertises:not(.is-current) .xcard__edge::after,
html.yn-fx main.home #expertises .exp__cards.is-hover .idcard{animation-play-state:paused}
html.yn-fx main.home #expertises.is-current .exp__cards.is-hover .xcard__media{animation-play-state:running,paused}

/* --- départ (--lv : 0 → 1 quand la section part vers le haut) : domino ---- */
html.yn-fx main.home #expertises .xcard{
  rotate:x calc(var(--lv,0) * 14deg * (1 + var(--i,1) * .15));
  translate:0 0 calc(var(--lv,0) * -160 * var(--u))}

/* pendant l'inclinaison au pointeur (exp.js écrit transform à chaque image) */
html.yn-fx main.home #expertises .xcard.is-tilt{will-change:transform}

/* ---- téléphone : carte au centre de la bande soulevée, voisines en retrait
   (propriété scale : ne gêne ni l'arrivée ni le glisser) ---------------------- */
@media (max-width:1023px){
  html.yn-fx main.home #expertises .xcard,
  html.yn-fx main.home #expertises.st-in .xcard.rv{rotate:none;translate:none;transition:scale .5s var(--ease-out),border-color .45s var(--ease),box-shadow .45s var(--ease)}
  html.yn-fx main.home #expertises .exp__cards.has-focus .xcard:not(.is-focus){scale:.94}
  html.yn-fx main.home #expertises .exp__cards.has-focus .xcard:not(.is-focus) .xcard__veil{opacity:.35}
  html.yn-fx main.home #expertises .xcard.is-focus{border-color:rgba(255,64,82,.95);box-shadow:0 0 22px -6px var(--red-glow),inset 0 0 26px -12px rgba(246,43,62,.45)}
}

/* ---- animations réduites : cartes à plat, arête éclairée statique ------------ */
@media (prefers-reduced-motion:reduce){
  html:not(.calage) main.home #expertises .xcard__edge::before{opacity:.45}
  html:not(.calage) main.home #expertises .xcard__go svg{transition:none}
  html:not(.calage) main.home #expertises .xcard__glare{display:none}
}