/* SUPERMATHS — Recherche d'accueil v2 : animée, intelligente, aux couleurs SUPERMATHS */
#smFind .sh2{
  --t:#19b8ae;--td:#0d8a83;--ink:#13283a;--mu:#587080;--rose:#ff6f9f;--sun:#ffc75a;
  position:relative;isolation:isolate;margin:0 -4px 28px;
  padding:clamp(36px,6vw,74px) clamp(14px,3vw,32px) clamp(24px,3.5vw,36px);
  border-radius:34px;text-align:center;color:var(--ink);
}
/* Fond : dégradé + taches de couleur qui dérivent lentement */
#smFind .sh2-bg{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f2fbfa 42%,#dcf4f1 100%)}
#smFind .sh2-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:sh2Drift 18s ease-in-out infinite alternate}
#smFind .sh2-bg .b1{width:420px;height:420px;left:-120px;top:-140px;background:#9fe7df}
#smFind .sh2-bg .b2{width:360px;height:360px;right:-90px;top:30px;background:#ffd1e0;animation-duration:22s;animation-delay:-6s}
#smFind .sh2-bg .b3{width:380px;height:380px;left:38%;bottom:-220px;background:#fff0c2;animation-duration:26s;animation-delay:-11s}
@keyframes sh2Drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}100%{transform:translate(-30px,50px) scale(.95)}}

/* Symboles mathématiques flottants */
#smFind .sh2-sym{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
#smFind .sh2-sym span{position:absolute;font-weight:800;color:var(--td);opacity:.10;font-size:clamp(22px,3vw,40px);animation:sh2Float 9s ease-in-out infinite}
#smFind .sh2-sym span:nth-child(1){left:7%;top:18%;animation-duration:8s}
#smFind .sh2-sym span:nth-child(2){left:14%;top:62%;animation-duration:11s;animation-delay:-2s}
#smFind .sh2-sym span:nth-child(3){left:84%;top:16%;animation-duration:10s;animation-delay:-4s}
#smFind .sh2-sym span:nth-child(4){left:90%;top:56%;animation-duration:12s;animation-delay:-1s}
#smFind .sh2-sym span:nth-child(5){left:24%;top:34%;animation-duration:9s;animation-delay:-5s;font-size:clamp(18px,2.2vw,30px)}
#smFind .sh2-sym span:nth-child(6){left:73%;top:36%;animation-duration:13s;animation-delay:-3s;font-size:clamp(18px,2.2vw,30px)}
#smFind .sh2-sym span:nth-child(7){left:4%;top:84%;animation-duration:10s;animation-delay:-7s}
#smFind .sh2-sym span:nth-child(8){left:94%;top:86%;animation-duration:9s;animation-delay:-6s}
#smFind .sh2-sym span:nth-child(9){left:50%;top:6%;animation-duration:14s;animation-delay:-8s;font-size:clamp(16px,2vw,26px)}
#smFind .sh2-sym span:nth-child(10){left:62%;top:90%;animation-duration:11s;animation-delay:-9s}
@keyframes sh2Float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(6deg)}}

/* Pastille « en direct » */
#smFind .sh2-live{
  display:inline-flex;align-items:center;gap:4px;margin:0 auto 18px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.85);box-shadow:0 6px 20px rgba(15,80,90,.08);font-size:14px;color:var(--mu);
  animation:sh2Up .7s .05s both
}
#smFind .sh2-live b{color:var(--ink);font-variant-numeric:tabular-nums}
#smFind .sh2-live .sep{margin:0 8px;opacity:.5}
#smFind .sh2-live .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;margin-right:6px;animation:sh2Pulse 2s infinite}
@keyframes sh2Pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%,100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

/* Titre + mot qui change */
#smFind .sh2-title{
  margin:0 auto 14px;max-width:17ch;font-size:clamp(38px,6.4vw,78px);line-height:1.05;font-weight:900;letter-spacing:-.035em;color:var(--ink);
  animation:sh2Up .8s .12s both
}
#smFind .sh2-rot{position:relative;display:inline-block;vertical-align:bottom;height:1.12em;overflow:hidden;
  transition:width .45s cubic-bezier(.2,.8,.2,1);text-align:left}
#smFind .sh2-rot em{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;
  background:linear-gradient(100deg,var(--t),#0f9cc0 55%,var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(105%);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
#smFind .sh2-rot em.on{position:relative;transform:none;opacity:1}
#smFind .sh2-rot em.out{transform:translateY(-105%);opacity:0}
#smFind .sh2-sub{margin:0 auto clamp(24px,3.4vw,34px);max-width:56ch;font-size:clamp(15px,1.5vw,18px);color:var(--mu);line-height:1.55;animation:sh2Up .8s .22s both}
@keyframes sh2Up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Barre de recherche */
#smFind .sh2-bar{
  position:relative;z-index:5;display:flex;align-items:center;gap:8px;max-width:880px;margin:0 auto;padding:9px 9px 9px 20px;
  background:#fff;border-radius:999px;box-shadow:0 0 0 10px rgba(255,255,255,.6),0 18px 44px rgba(16,90,95,.14);
  transition:box-shadow .3s,transform .3s;animation:sh2Pop .8s .3s both
}
#smFind .sh2-bar::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--a,0deg),var(--t),#7fd8ff,var(--rose),var(--sun),var(--t));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s}
#smFind .sh2-bar:focus-within{transform:translateY(-2px);box-shadow:0 0 0 10px rgba(25,184,174,.14),0 22px 50px rgba(16,90,95,.2)}
#smFind .sh2-bar:focus-within::before{opacity:1;animation:sh2Spin 4s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sh2Spin{to{--a:360deg}}
@keyframes sh2Pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
#smFind .sh2-ico{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:var(--t);stroke-width:2.2;stroke-linecap:round}
#smFind .sh2-field{position:relative;flex:1;min-width:0;text-align:left}
#smFind #pcSearch{
  width:100%!important;border:0!important;outline:0!important;background:none!important;box-shadow:none!important;
  padding:13px 4px!important;margin:0!important;font:inherit;font-size:18px!important;color:var(--ink)
}
#smFind #pcSearch::-webkit-search-cancel-button{display:none}
#smFind .sh2-ph{position:absolute;left:4px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:18px;color:#3e5665;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
#smFind .sh2-ph::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-3px;background:var(--t);animation:sh2Caret 1s steps(1) infinite}
#smFind .sh2-field.typing .sh2-ph{display:none}
@keyframes sh2Caret{50%{opacity:0}}
#smFind .sh2-clear{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:#eef5f6;color:#4a6472;font-size:20px;line-height:1;cursor:pointer}
#smFind .sh2-clear[hidden]{display:none}
#smFind .sh2-go{
  position:relative;overflow:hidden;flex:0 0 auto;border:0;border-radius:999px;padding:17px 36px;cursor:pointer;
  background:linear-gradient(135deg,var(--t),var(--td));color:#fff;font:inherit;font-size:17px;font-weight:800;
  box-shadow:0 10px 24px rgba(25,184,174,.32);transition:transform .15s,box-shadow .2s
}
#smFind .sh2-go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:sh2Shine 4.5s 1.5s infinite}
@keyframes sh2Shine{0%{transform:translateX(-120%)}25%,100%{transform:translateX(120%)}}
#smFind .sh2-go:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(25,184,174,.4)}
#smFind .sh2-go:active{transform:scale(.97)}

/* Suggestions intelligentes */
#smFind .sh2-sug{
  position:absolute;left:12px;right:12px;top:calc(100% + 12px);z-index:50;max-height:min(430px,62vh);overflow:auto;
  background:#fff;border-radius:22px;padding:8px;text-align:left;box-shadow:0 26px 60px rgba(13,50,66,.22);
  animation:sh2Sug .22s ease-out
}
#smFind .sh2-sug[hidden]{display:none}
@keyframes sh2Sug{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#smFind .sh2-sug h6{margin:8px 12px 4px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#7a909c}
#smFind .sh2-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:none;cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
#smFind .sh2-opt.act,#smFind .sh2-opt:hover{background:#eefaf8}
#smFind .sh2-opt .k{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:13px;font-weight:900;background:#e7f7f5;color:var(--td);overflow:hidden}
#smFind .sh2-opt .k img{width:100%;height:100%;object-fit:cover}
#smFind .sh2-opt .k.teacher{border-radius:50%;background:linear-gradient(150deg,#bfece9,#3fb5ae);color:#fff}
#smFind .sh2-opt .k.soon{background:#f3f5f6;color:#8a9aa4}
#smFind .sh2-opt .tx{flex:1;min-width:0}
#smFind .sh2-opt .tx b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#smFind .sh2-opt .tx small{display:block;margin-top:2px;font-size:12.5px;color:#6b8290;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#smFind .sh2-opt mark{background:#c9f1ec;color:inherit;border-radius:4px;padding:0 1px}
#smFind .sh2-opt .n{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--td);background:#e7f7f5;border-radius:999px;padding:4px 9px}
#smFind .sh2-empty{padding:16px;color:#6b8290;font-size:14px}

/* Catégories */
#smFind .sh2-cats{
  position:relative;display:flex;align-items:center;gap:6px;max-width:1240px;margin:clamp(26px,3.6vw,38px) auto 0;
  padding:13px;border-radius:30px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(15,80,90,.06)
}
#smFind .sh2-track{display:flex;gap:4px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1;min-width:0;padding:4px 2px}
#smFind .sh2-track::-webkit-scrollbar{display:none}
#smFind .sh2-cat{
  position:relative;flex:0 0 auto;display:grid;justify-items:center;gap:7px;min-width:98px;padding:11px 14px;
  border:0;border-radius:18px;background:none;cursor:pointer;color:#3a5260;font:inherit;font-size:15px;
  transition:background .25s,color .25s,transform .25s,box-shadow .25s;animation:sh2Up .55s both;animation-delay:calc(.45s + var(--i,0)*55ms)
}
#smFind .sh2-cat i{
  font-style:normal;display:grid;place-items:center;min-width:36px;height:31px;padding:0 6px;
  border:1.8px solid #2b4352;border-radius:9px;font-size:12.5px;font-weight:900;color:#1d3443;letter-spacing:-.02em;
  transition:border-color .25s,color .25s,background .25s,transform .35s cubic-bezier(.3,1.6,.5,1)
}
#smFind .sh2-cat:hover{background:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,80,90,.10)}
#smFind .sh2-cat:hover i{border-color:var(--t);color:var(--td);transform:rotate(-6deg) scale(1.08)}
#smFind .sh2-cat .n{position:absolute;top:4px;right:8px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:10.5px;font-weight:900;line-height:19px;font-style:normal;animation:sh2Badge .4s both}
#smFind .sh2-cat.zero{opacity:.55}
#smFind .sh2-cat.on{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(19,40,58,.25)}
#smFind .sh2-cat.on i{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
@keyframes sh2Badge{from{transform:scale(0)}to{transform:scale(1)}}
#smFind .sh2-nav{flex:0 0 50px;width:50px;height:50px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(16,60,70,.12);transition:transform .2s}
#smFind .sh2-nav:hover{transform:scale(1.07)}
#smFind .sh2-nav[hidden]{display:none}
#smFind .sh2 :focus-visible{outline:3px solid #8fdedc;outline-offset:2px}

/* Pied : confiance + filtres */
#smFind .sh2-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1240px;margin:16px auto 0;animation:sh2Up .7s .7s both}
#smFind .sh2-trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:#4c6573;font-weight:600}
#smFind .sh2-more{display:flex;gap:10px;flex-wrap:wrap}
#smFind .sh2-more select{border:1px solid #cfe5e6;border-radius:999px;background:#fff;padding:9px 16px;font:inherit;font-size:14px;color:#2d4655;min-width:190px}

/* Mobile */
@media(max-width:640px){
  #smFind .sh2{border-radius:24px;margin:0 0 20px}
  #smFind .sh2-live{font-size:12.5px;padding:7px 12px}
  #smFind .sh2-title{font-size:clamp(28px,8.6vw,40px)}
  #smFind .sh2-rot{display:block;margin:0 auto;width:auto!important;text-align:center}
  #smFind .sh2-rot em{left:0;right:0}
  #smFind .sh2-bar{padding:7px 7px 7px 14px;box-shadow:0 0 0 6px rgba(255,255,255,.6),0 12px 28px rgba(16,90,95,.14)}
  #smFind .sh2-ico{display:none}
  #smFind #pcSearch,#smFind .sh2-ph{font-size:15.5px!important}
  #smFind .sh2-go{padding:13px 16px;font-size:14px}
  #smFind .sh2-sug{left:0;right:0}
  #smFind .sh2-nav{display:none}
  #smFind .sh2-cats{padding:9px 6px;border-radius:22px}
  #smFind .sh2-cat{min-width:84px;padding:9px 9px;font-size:13.5px}
  #smFind .sh2-foot{justify-content:center;text-align:center}
  #smFind .sh2-trust{justify-content:center;font-size:12.5px}
  #smFind .sh2-more{width:100%}
  #smFind .sh2-more select{flex:1;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  #smFind .sh2 *,#smFind .sh2 *::before,#smFind .sh2 *::after{animation:none!important;transition:none!important}
  #smFind .sh2-track{scroll-behavior:auto}
}

/* V3 — bloc remonté tout en haut de l'accueil */
#smFind.sm-find{width:calc(100% - 24px);max-width:1560px;margin:14px auto 0;box-sizing:border-box}
#smFind .sh2{margin:0}
/* le haut du bloc « Les bonnes bases » n'a plus besoin de son grand espace vide */
@media(min-width:901px){#accueil.hero{padding-top:48px!important}}
#cours-en-ligne .sm-find-head{margin-bottom:10px}
@media(max-width:640px){#smFind.sm-find{width:calc(100% - 16px);margin-top:8px}}