/* Catalogue Fiches de révision : une couleur par niveau, badges, ouverture animée.
   Chargé avant le <style> de la page : tout est préfixé par #catalogue pour garder la priorité. */
@keyframes cat-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cat-barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cat-pop{0%{transform:rotate(-4deg) scale(1)}40%{transform:rotate(6deg) scale(1.22)}100%{transform:rotate(-4deg) scale(1)}}
@keyframes cat-etincelle{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes cat-bouge{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(9deg) scale(1.1)}}

:root{interpolate-size:allow-keywords}

/* ---------- Les 4 offres ---------- */
#catalogue .offres{gap:1.1rem}
#catalogue .o-carte{--oc:#A9DDF0;position:relative;border:1px solid rgba(0,0,0,.07);border-top:6px solid var(--oc);border-radius:16px;padding:1.3rem 1.3rem 1.2rem;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;animation:cat-monte .55s cubic-bezier(.2,.8,.2,1) both}
#catalogue .o-carte:nth-child(2){animation-delay:.07s}
#catalogue .o-carte:nth-child(3){animation-delay:.14s}
#catalogue .o-carte:nth-child(4){animation-delay:.21s}
#catalogue .o-carte:hover{transform:translateY(-5px);border-color:rgba(0,0,0,.07);border-top-color:var(--oc);box-shadow:7px 7px 0 var(--oc)}
#catalogue .o-carte:hover .o-icone{animation:cat-bouge .6s ease}
#catalogue .o-sm{--oc:#F7C2AC}
#catalogue .o-coach{--oc:#D3C8F4}
#catalogue .o-pack{--oc:var(--lime)}
#catalogue .o-carte.vedette{border:1px solid rgba(0,0,0,.07);border-top:6px solid var(--lime);background:linear-gradient(180deg,#FBFCD2,#fff 70%);box-shadow:0 8px 24px rgba(224,232,0,.28)}
#catalogue .o-carte.vedette:hover{border-color:rgba(0,0,0,.07);border-top-color:var(--lime)}
#catalogue .o-icone{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--oc);display:grid;place-items:center;margin-bottom:.55rem}
#catalogue .o-icone svg{width:1.45rem;height:1.45rem;fill:none;stroke:var(--dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#catalogue .o-ruban{position:absolute;top:-.95rem;right:.9rem;background:var(--dark);color:var(--lime);font-family:var(--fh);font-weight:900;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.28rem .75rem;border-radius:999px}
#catalogue .o-avant{display:block;font-size:.8rem;font-weight:700;color:var(--slate-d);line-height:1.2}

/* ---------- Les niveaux ---------- */
#catalogue .niveau{--acc:#A9DDF0;--acc-d:#2A86AB;--tint:#EAF6FB;
  overflow:visible;border:1px solid rgba(0,0,0,.06);border-left:8px solid var(--acc);border-radius:18px;margin-bottom:.9rem;
  box-shadow:0 4px 14px rgba(43,54,56,.06);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
#catalogue .niveau[data-niveau="college"]{--acc:#A9DDF0;--acc-d:#2A86AB;--tint:#EAF6FB}
#catalogue .niveau[data-niveau="seconde"]{--acc:#F7C2AC;--acc-d:#C4592D;--tint:#FDF0EA}
#catalogue .niveau[data-niveau="1re-spe"]{--acc:#E0E800;--acc-d:#7F8500;--tint:#F8FAC2}
#catalogue .niveau[data-niveau="1re-ns"]{--acc:#B6E6C8;--acc-d:#2B8C57;--tint:#E9F7EF}
#catalogue .niveau[data-niveau="tle-spe"]{--acc:#D3C8F4;--acc-d:#6C4FC4;--tint:#F1EEFC}
#catalogue .niveau[data-niveau="tle-exp"]{--acc:#F6BDD5;--acc-d:#B93B76;--tint:#FCEAF2}
#catalogue .niveau:not([open]):hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(43,54,56,.13),6px 6px 0 var(--acc)}
#catalogue .niveau>summary{background:linear-gradient(90deg,var(--tint),#fff 65%);border-radius:10px 16px 16px 10px;padding:1rem 1.3rem 1rem 1.1rem;gap:1rem;transition:background .3s}
#catalogue .niveau[open]>summary{background:var(--acc);border-radius:10px 16px 0 0}
#catalogue .n-badge{position:relative;flex:none;width:3.3rem;height:3.3rem;border-radius:15px;background:var(--acc);color:var(--dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fh);line-height:1;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(43,54,56,.12);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .3s}
#catalogue .n-badge b{font-weight:900;font-size:1.12rem;letter-spacing:-.03em}
#catalogue .niveau[data-niveau="college"] .n-badge b{font-size:.92rem;letter-spacing:-.05em}
#catalogue .n-badge i{font-style:normal;font-weight:800;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;color:var(--acc-d)}
#catalogue .niveau[data-niveau="1re-spe"] .n-badge i{color:var(--dark)}
#catalogue .niveau:not([open])>summary:hover .n-badge{transform:rotate(4deg) scale(1.1)}
#catalogue .niveau[open] .n-badge{background:#fff}
#catalogue .niveau.anim .n-badge{animation:cat-pop .6s cubic-bezier(.2,.8,.2,1)}
#catalogue .niveau>summary .n-titre{font-size:1.22rem;min-width:0}
#catalogue .niveau>summary .n-info{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
#catalogue .pill{display:inline-block;font-family:var(--fh);font-weight:800;font-size:.8rem;line-height:1.2;padding:.28rem .7rem;border-radius:999px;
  background:var(--tint);border:1.5px solid var(--acc);color:var(--dark);white-space:nowrap}
#catalogue .niveau[open] .pill{background:#fff;border-color:transparent}
#catalogue .pill-prep{background:repeating-linear-gradient(135deg,#fff 0 6px,var(--tint) 6px 12px);border-style:dashed;border-color:var(--acc-d);color:var(--acc-d)}
#catalogue .niveau>summary::after{width:.55rem;height:.55rem;margin:-.2rem .5rem 0 .2rem;border-color:var(--dark)}
#catalogue .niveau[open]>summary::after{margin-top:.25rem}
#catalogue .niveau>.n-corps{background:linear-gradient(180deg,var(--tint),var(--light) 160px);border-radius:0 0 16px 10px}

/* Ouverture en douceur de la hauteur (navigateurs récents ; sinon ouverture instantanée) */
@supports (interpolate-size:allow-keywords){
  #catalogue .niveau::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
  #catalogue .niveau[open]::details-content{block-size:auto}
}
/* Entrée échelonnée du contenu : la classe .anim est posée par js/catalogue-effets.js à chaque ouverture */
#catalogue .niveau.anim .inclus,#catalogue .niveau.anim .vide,#catalogue .niveau.anim .ligne,#catalogue .niveau.anim .pack{
  animation:cat-monte .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),12)*55ms + 120ms)}
#catalogue .niveau.anim .avance .barre span{transform-origin:left;animation:cat-barre .9s .5s cubic-bezier(.2,.8,.2,1) both}

/* Étincelles */
#catalogue .n-badge .et{position:absolute;left:50%;top:50%;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;border-radius:50%;background:var(--c);pointer-events:none;
  animation:cat-etincelle .75s cubic-bezier(.1,.7,.3,1) forwards}
#catalogue .n-badge .et:nth-child(3n){border-radius:2px;width:.42rem;height:.42rem}

/* Lignes de chapitres */
#catalogue .ligne{border-left:6px solid var(--acc);border-radius:6px 14px 14px 6px;transition:transform .2s,box-shadow .2s}
#catalogue .ligne:hover{transform:translateX(4px);box-shadow:0 6px 18px rgba(43,54,56,.1)}
#catalogue .lignes{counter-reset:chap}
#catalogue .ligne h4{display:flex;align-items:center;gap:.65rem}
#catalogue .ligne h4 .kg-pastille{flex:none}
#catalogue .ligne h4::before{counter-increment:chap;content:counter(chap);flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--acc);
  display:inline-grid;place-items:center;font-size:.82rem;font-weight:900;color:var(--dark)}
#catalogue .ligne .prix{color:var(--dark)}

/* Pack du niveau */
#catalogue .pack{border-color:var(--acc);background:linear-gradient(135deg,var(--tint),#fff 55%);box-shadow:0 8px 26px rgba(43,54,56,.1)}
#catalogue .niveau[data-niveau="1re-spe"] .pack{border-color:var(--lime)}
#catalogue .avance .barre{background:#fff;box-shadow:inset 0 0 0 1.5px var(--acc)}
#catalogue .avance .barre span{background:var(--acc-d)}
#catalogue .niveau[data-niveau="1re-spe"] .avance .barre span{background:var(--lime-h)}

@media (max-width:560px){
  #catalogue .n-badge{width:2.9rem;height:2.9rem}
  #catalogue .niveau>summary .n-info{justify-content:flex-start}
  #catalogue .niveau>summary .n-titre{flex-basis:calc(100% - 7rem)}
}
@media (prefers-reduced-motion:reduce){
  #catalogue *,#catalogue *::before,#catalogue *::after{animation:none!important;transition:none!important}
  #catalogue .niveau:not([open]):hover,#catalogue .o-carte:hover,#catalogue .ligne:hover{transform:none}
}