/* Blyx : socle commun (écran d'entrée, espace formation, admin).
   Tokens et composants repris de la DA validée (présentation de l'opportunité BDR).
   Noir et blanc, un seul accent iris. DM Sans uniquement. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#111;--black:#000;--graphite:#333;--mid:#707070;--mist:#f4f4f4;--white:#fff;--line:#e5e5e5;--line-2:#d4d4d8;
  --iris:#a78bfa;--iris-text:#7c3aed;
  --iris-soft:rgba(167,139,250,.11);--iris-line:rgba(167,139,250,.4);
  --night:#0a0a0c;--night-card:#141418;--night-line:rgba(255,255,255,.09);
  --radius-card:24px;--radius-pill:9999px;
  --font:"DM Sans",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 17px/1.55 var(--font);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(167,139,250,.45)}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img,svg{display:block;max-width:100%}
p{text-wrap:pretty}
:focus-visible{outline:2px solid rgba(124,58,237,.75);outline-offset:3px;border-radius:4px}
.sombre :focus-visible{outline-color:rgba(167,139,250,.95)}
[hidden]{display:none!important}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;left:16px;top:16px;z-index:200;width:auto;height:auto;clip:auto;padding:10px 18px;border-radius:9999px;background:var(--ink);color:#fff;font-size:16px;text-decoration:none}

.ic{width:1.25em;height:1.25em;flex:none}
.logo{fill:currentColor;flex:none}

/* ============ Texte d'accent : un mot en italique iris ============ */
.em{font-style:italic;font-weight:700;color:var(--iris-text)}
.sombre .em{color:var(--iris)}

/* Soulignement feutre tracé */
.uline{position:relative;display:inline-block}
.uline svg{position:absolute;left:0;bottom:-.08em;width:100%;height:.16em;overflow:visible;pointer-events:none}
.uline path{fill:none;stroke:var(--iris);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;animation:trace 1.2s cubic-bezier(.65,0,.35,1) .5s backwards}

/* ============ Boutons ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--radius-pill);font-size:16px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--ease-out),border-color .3s}
.btn .ic{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.btn:hover .ic.suite{transform:translateX(3px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-100%);background:linear-gradient(to right,rgba(167,139,250,0),rgba(167,139,250,.5),rgba(167,139,250,0));transition:transform .7s ease-in-out}
.btn--ink:hover::before{transform:translateX(100%)}
.btn--ink:hover{background:var(--graphite);box-shadow:0 10px 32px rgba(167,139,250,.5)}
.btn--clair{background:#fff;color:var(--ink)}
.btn--clair:hover{background:var(--iris);box-shadow:0 8px 24px rgba(167,139,250,.5)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--iris-text);color:var(--iris-text);background:var(--iris-soft)}
.btn--petit{height:38px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ============ Badge animé ============ */
.badge{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;border:1px solid var(--iris-line);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-pill);padding:9px 18px;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);box-shadow:0 4px 24px rgba(167,139,250,.2)}
.badge .ping{position:relative;display:inline-flex;width:8px;height:8px}
.badge .ping::before,.badge .ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--iris)}
.badge .ping::before{opacity:.55;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.badge .bt{position:relative;z-index:1}
.badge .sweep{position:absolute;inset-block:0;left:-33%;width:33%;background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),transparent);animation:pillsweep 4.5s ease-in-out infinite}

/* ============ Fonds : halos, grain ============ */
.glow{position:absolute;z-index:0;border-radius:50%;filter:blur(64px);pointer-events:none;background:radial-gradient(circle,rgba(167,139,250,.42) 0%,transparent 70%);animation:breath 15s ease-in-out infinite}
.grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-size:200px 200px;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0 0.98 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ============ Carte sombre à glow iris ============ */
.gcard{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--night-card);color:#fff;border:1px solid var(--night-line);transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s}
.gcard::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s;pointer-events:none;background:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),rgba(167,139,250,.24),transparent 70%)}
.gcard::after{content:"";position:absolute;right:-48px;top:-48px;width:160px;height:160px;border-radius:50%;opacity:.5;filter:blur(30px);pointer-events:none;background:radial-gradient(circle,rgba(167,139,250,.5),transparent 70%);animation:breath 11s ease-in-out infinite}
.gcard>*{position:relative;z-index:1}
a.gcard:hover,button.gcard:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.5);box-shadow:0 24px 56px rgba(167,139,250,.28)}
a.gcard:hover::before,button.gcard:hover::before{opacity:1}

/* ============ Animations ============ */
@keyframes breath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(8px,-14px,0)}66%{transform:translate3d(-6px,10px,0)}}
@keyframes streak{0%{transform:translateX(-100%);opacity:0}20%,80%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@keyframes pillsweep{0%{transform:translateX(-120%)}60%{transform:translateX(380%)}100%{transform:translateX(380%)}}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes bfloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}