/* ==========================================================================
   03 — EXPERTISES  (maquette : y 585 → 748)
   Colonne titre x 97 → 317, trois cartes 230 × 126 à x 317 / 559 / 801.
   ========================================================================== */
.exp{min-height:calc(164 * var(--m))}
.exp__grid{position:relative;z-index:2;display:grid;grid-template-columns:calc(220 * var(--m)) 1fr;padding:calc(17 * var(--m)) calc(55 * var(--m)) calc(19 * var(--m)) calc(97 * var(--m))}
.exp__intro{padding-top:calc(4 * var(--m));padding-right:calc(12 * var(--m))}
.exp__title{margin-top:max(calc(var(--mins) * 18px),calc(13 * var(--m)))}
.exp__intro .txt{margin-top:max(calc(var(--mins) * 16px),calc(13 * var(--m)));font-size:var(--fs-small);max-width:max(calc(var(--mins) * 300px),calc(192 * var(--m)))}

.exp__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(12 * var(--m));align-items:stretch}

.xcard{position:relative;display:flex;flex-direction:column;min-height:calc(126 * var(--m));padding:calc(15 * var(--m)) calc(16 * var(--m)) calc(12 * var(--m));border:1px solid rgba(246,43,62,.42);background:linear-gradient(135deg,#0d0d0e 0,#080809 60%);overflow:hidden;isolation:isolate;cursor:pointer;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.xcard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 78% 30%,rgba(246,43,62,.14),transparent 70%);opacity:.7;transition:opacity .45s var(--ease)}
.xcard__media{position:absolute;z-index:-1;pointer-events:none;transition:transform .8s var(--ease-out),filter .6s var(--ease)}
.xcard__num{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);color:var(--red);letter-spacing:.06em}
.xcard__title{margin-top:max(calc(var(--mins) * 8px),calc(6 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 21px),calc(15.5 * var(--m)));line-height:.98;text-transform:uppercase;color:var(--ink)}
.xcard__title span{display:block;color:var(--red)}
.xcard__list{margin-top:auto;padding-top:max(calc(var(--mins) * 16px),calc(12 * var(--m)));padding-right:calc(34 * var(--m))}
.xcard__list li{position:relative;padding-left:max(calc(var(--mins) * 16px),calc(11 * var(--m)));font-size:max(calc(var(--mins) * 13px),calc(6.4 * var(--m)));line-height:1.95;color:var(--ink-2);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.xcard__list li::before{content:"";position:absolute;left:0;top:50%;margin-top:-.25em;border-left:.42em solid var(--red);border-top:.26em solid transparent;border-bottom:.26em solid transparent}
.xcard__go{position:absolute;right:calc(10 * var(--m));bottom:calc(9 * var(--m))}

/* visuels (chacun dans son emplacement nommé) */
.xcard--identity .xcard__media{right:calc(-18 * var(--m));top:calc(-16 * var(--m));width:calc(150 * var(--m));height:calc(150 * var(--m));perspective:calc(500 * var(--m))}
.idcard{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:calc(3 * var(--m));transform:rotateX(38deg) rotateZ(-34deg);transform-origin:50% 50%;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.06),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(145deg,#1d1d20,#0f0f11 60%,#08080a);
  box-shadow:0 calc(24 * var(--m)) calc(30 * var(--m)) rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.07)}
.idcard img{position:absolute;left:50%;top:44%;width:34%;transform:translate(-50%,-50%);opacity:.9;filter:grayscale(.15) drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.idcard::after{content:"YNEL";position:absolute;left:0;right:0;top:66%;text-align:center;font-family:var(--f-mono);font-weight:500;font-size:calc(7 * var(--m));letter-spacing:.35em;color:rgba(245,243,238,.62)}
.xcard--web .xcard__media{right:calc(-40 * var(--m));top:calc(-2 * var(--m));width:calc(175 * var(--m));filter:brightness(.62) saturate(.85)}
.xcard--podcast .xcard__media{right:calc(8 * var(--m));top:calc(-18 * var(--m));width:calc(62 * var(--m));filter:brightness(.72) saturate(.55)}
.xcard--web::after,.xcard--podcast::after,.xcard--identity::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,9,.9) 0,rgba(8,8,9,.55) 45%,transparent 75%);pointer-events:none}

/* survol : le visuel bouge un peu, la lueur rouge et la bordure montent */
.xcard:hover,.xcard:focus-within{border-color:rgba(255,64,82,.95);box-shadow:0 0 calc(26 * var(--m)) -6px var(--red-glow),inset 0 0 calc(30 * var(--m)) -12px rgba(246,43,62,.45)}
.xcard:hover::before,.xcard:focus-within::before{opacity:1}
.xcard:hover .xcard__media{transform:translate3d(calc(-4 * var(--m)),calc(-3 * var(--m)),0) scale(1.03)}
.xcard--web:hover .xcard__media{filter:brightness(.8) saturate(1)}
.xcard--podcast:hover .xcard__media{filter:brightness(.9) saturate(.8)}
.xcard:hover .round{border-color:var(--red);box-shadow:0 0 16px -2px var(--red-glow);background:rgba(246,43,62,.12)}
.xcard:hover .round svg{transform:translateX(2px)}

@media (max-width:1023px){
  .exp{min-height:0}
  .exp__grid{grid-template-columns:1fr;padding:56px 24px 48px}
  .exp__intro{padding:0 0 28px}
  .exp__intro .txt{font-size:16px;max-width:560px}
  .exp__cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
  .xcard{min-height:230px;padding:20px 20px 18px}
  .xcard__title{font-size:26px}
  .xcard__list{padding-right:52px}
  .xcard__list li{font-size:14px}
  .xcard__go{right:14px;bottom:14px}
  .xcard--identity .xcard__media{width:210px;height:210px;right:-40px;top:-30px}
  .xcard--web .xcard__media{width:250px;right:-70px;top:0}
  .xcard--podcast .xcard__media{width:88px;right:18px;top:-24px}
}