
.defis{
  --brand:#FF5C31; --brand-text:#A92F12; --brand-soft:#FFF1EC; --brand-soft-2:#FFE2D7;
  --ink:#172331; --muted:#576373; --line:#DCE2E9; --paper:#FFFFFF;
  font-family:Poppins, "Segoe UI", system-ui, sans-serif; color:var(--ink);
  padding-block:clamp(56px,8vw,112px);
}
html.theme-dark .defis{
  --brand-text:#FF8A66; --brand-soft:#2A1B17; --brand-soft-2:#3A2219;
  --ink:#F3F6FA; --muted:#BDC9D5; --line:#334657; --paper:#16202C;
}
.defis__head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4vw,48px)}
.defis__eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text);margin:0}
.defis__title{font-size:clamp(34px,4.2vw,58px);font-weight:500;line-height:1.05;letter-spacing:-.03em;margin:0;text-wrap:balance}
.defis__title em{font-style:normal;color:var(--brand)}
.defis__intro{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0}
.defis__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.defis__grid>li{display:flex;min-width:0}
@media (max-width:1020px){.defis__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.defis__grid{grid-template-columns:minmax(0,1fr)}}

.challenge-card{
  position:relative;isolation:isolate;overflow:hidden;flex:1;
  display:flex;flex-direction:column;gap:12px;
  padding:28px 28px 24px;border:1px solid var(--line);border-radius:18px;
  background:var(--paper);color:inherit;text-decoration:none;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.challenge-card::before{ /* halo corail discret au survol */
  content:"";position:absolute;inset:auto -40% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, rgb(255 92 49 / .14), transparent);
  opacity:0;transition:opacity .35s ease;z-index:-1;
}
.challenge-card:hover,.challenge-card:focus-visible{
  border-color:var(--brand);transform:translateY(-3px);
  box-shadow:0 18px 40px rgb(23 35 49 / .10);
}
.challenge-card:hover::before,.challenge-card:focus-visible::before{opacity:1}
.challenge-card:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.ch-icon{width:76px;height:76px;border-radius:20px;background:var(--brand-soft);display:grid;place-items:center;transition:background .25s ease}
.challenge-card:hover .ch-icon,.challenge-card:focus-visible .ch-icon{background:var(--brand-soft-2)}
.ch-icon svg{width:54px;height:54px;overflow:visible}
.ch-icon .ink{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ch-icon .acc{fill:var(--brand)}
.ch-icon .acc-line{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ch-icon .ghost{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:2 3;opacity:.7}
.ch-icon .paper{fill:var(--paper)}
.ch-icon *{transform-box:fill-box;transform-origin:center}

.challenge-card h3{font-size:20px;font-weight:600;line-height:1.3;margin:8px 0 0;letter-spacing:-.01em}
.challenge-card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.ch-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:15px;font-weight:600;color:var(--brand-text)}
.ch-link svg{width:20px;height:20px;flex:none;transition:transform .25s ease}
.challenge-card:hover .ch-link svg,.challenge-card:focus-visible .ch-link svg{transform:translateX(5px)}

/* ---------- Animations des icônes ---------- */
.ic-scatter .blk{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ic-scatter .ghost{transition:opacity .3s ease}
.challenge-card:hover .ic-scatter .b1,.challenge-card:focus-visible .ic-scatter .b1{transform:translate(9px,7px)}
.challenge-card:hover .ic-scatter .b2,.challenge-card:focus-visible .ic-scatter .b2{transform:translate(-7px,9px)}
.challenge-card:hover .ic-scatter .b3,.challenge-card:focus-visible .ic-scatter .b3{transform:translate(7px,-7px)}
.challenge-card:hover .ic-scatter .b4,.challenge-card:focus-visible .ic-scatter .b4{transform:translate(-8px,-6px)}
.challenge-card:hover .ic-scatter .ghost,.challenge-card:focus-visible .ic-scatter .ghost{opacity:0}

.ic-report .spin{transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.challenge-card:hover .ic-report .spin,.challenge-card:focus-visible .ic-report .spin{transform:rotate(360deg)}
.ic-report .row{transition:transform .4s ease;transform-origin:left}
.challenge-card:hover .ic-report .row,.challenge-card:focus-visible .ic-report .row{transform:scaleX(.6)}

.ic-eye .bar{transform-origin:bottom}
.challenge-card:hover .ic-eye .bar,.challenge-card:focus-visible .ic-eye .bar{animation:defis-grow .6s cubic-bezier(.2,.8,.2,1) both}
.challenge-card:hover .ic-eye .bar:nth-of-type(2),.challenge-card:focus-visible .ic-eye .bar:nth-of-type(2){animation-delay:.08s}
.challenge-card:hover .ic-eye .bar:nth-of-type(3),.challenge-card:focus-visible .ic-eye .bar:nth-of-type(3){animation-delay:.16s}
.challenge-card:hover .ic-eye .lid,.challenge-card:focus-visible .ic-eye .lid{animation:defis-blink .5s ease}

.ic-shield .check{stroke-dasharray:1;stroke-dashoffset:0}
.challenge-card:hover .ic-shield .check,.challenge-card:focus-visible .ic-shield .check{animation:defis-draw .6s ease both}
.challenge-card:hover .ic-shield .shield,.challenge-card:focus-visible .ic-shield .shield{animation:defis-pulse .6s ease}

.ic-frame .br{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.challenge-card:hover .ic-frame .tl,.challenge-card:focus-visible .ic-frame .tl{transform:translate(3px,3px)}
.challenge-card:hover .ic-frame .tr,.challenge-card:focus-visible .ic-frame .tr{transform:translate(-3px,3px)}
.challenge-card:hover .ic-frame .bl,.challenge-card:focus-visible .ic-frame .bl{transform:translate(3px,-3px)}
.challenge-card:hover .ic-frame .brr,.challenge-card:focus-visible .ic-frame .brr{transform:translate(-3px,-3px)}
.ic-frame .star{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.challenge-card:hover .ic-frame .star,.challenge-card:focus-visible .ic-frame .star{transform:rotate(90deg) scale(1.12)}
.challenge-card:hover .ic-frame .mini,.challenge-card:focus-visible .ic-frame .mini{animation:defis-twinkle .6s ease .15s}

.ic-scale .step{transform-origin:bottom}
.challenge-card:hover .ic-scale .step,.challenge-card:focus-visible .ic-scale .step{animation:defis-grow .55s cubic-bezier(.2,.8,.2,1) both}
.challenge-card:hover .ic-scale .s2,.challenge-card:focus-visible .ic-scale .s2{animation-delay:.1s}
.challenge-card:hover .ic-scale .s3,.challenge-card:focus-visible .ic-scale .s3{animation-delay:.2s}
.ic-scale .proto{transition:transform .4s ease}
.challenge-card:hover .ic-scale .proto,.challenge-card:focus-visible .ic-scale .proto{transform:translateX(3px) rotate(-8deg)}

@keyframes defis-grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes defis-blink{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.15)}}
@keyframes defis-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes defis-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
@keyframes defis-twinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.6) rotate(45deg)}}

@media (prefers-reduced-motion:reduce){
  .challenge-card,.challenge-card *,.challenge-card::before{transition:none!important;animation:none!important}
  .challenge-card:hover,.challenge-card:focus-visible{transform:none}
}

/* V11.5 — six accents drawn from the Mirador symbol and supplied reference. */
.defis__grid>li:nth-child(1){--card-accent:#FF5C31;--card-text:#A92F12;--card-dark-text:#FFAA8F}
.defis__grid>li:nth-child(2){--card-accent:#F50083;--card-text:#AD005C;--card-dark-text:#FF85C4}
.defis__grid>li:nth-child(3){--card-accent:#00B9F1;--card-text:#006D8D;--card-dark-text:#63DCFF}
.defis__grid>li:nth-child(4){--card-accent:#FFA610;--card-text:#8B5200;--card-dark-text:#FFCB72}
.defis__grid>li:nth-child(5){--card-accent:#1674FF;--card-text:#1756BA;--card-dark-text:#8DBAFF}
.defis__grid>li:nth-child(6){--card-accent:#F1264F;--card-text:#B01435;--card-dark-text:#FF93A9}
.defis .challenge-card{--brand:var(--card-accent);--brand-text:var(--card-text);--brand-soft:color-mix(in srgb,var(--card-accent) 9%,var(--paper));--brand-soft-2:color-mix(in srgb,var(--card-accent) 20%,var(--paper));transition:background-color .3s ease,border-color .25s ease,transform .25s ease,box-shadow .3s ease}
html.theme-dark .defis .challenge-card{--brand-text:var(--card-dark-text)}
.challenge-card::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--card-accent) 22%,transparent),transparent)}
.defis .challenge-card:is(:hover,:focus-visible,:active,.is-selected){background:color-mix(in srgb,var(--card-accent) 7%,var(--paper));border-color:var(--card-accent);box-shadow:0 12px 32px color-mix(in srgb,var(--card-accent) 14%,transparent)}
.defis .challenge-card:is(:active,.is-selected) .ch-icon{background:var(--brand-soft-2)}
.defis .challenge-card:active{transform:translateY(-1px) scale(.99)}
.defis .challenge-card:is(:hover,:focus-visible,.is-selected) h3{color:var(--brand-text)}
.defis .challenge-card h3,.defis .ch-link{transition:color .25s ease}
.defis .challenge-card.is-selected::before{opacity:1}
.challenge-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--tap-x,50%) var(--tap-y,50%),color-mix(in srgb,var(--card-accent) 27%,transparent),transparent 65%)}
.challenge-card.is-pressing::after{animation:defis-colour-wave .6s ease-out}
@keyframes defis-colour-wave{0%{opacity:0;transform:scale(.7)}25%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.defis .challenge-card,.defis .challenge-card *,.defis .challenge-card::after{animation:none!important;transition:none!important}.defis .challenge-card:active{transform:none}}
