/* ============================================================
   PAGE « POUR QUI — ET POUR QUI PAS » — styles additionnels v3
   Le dernier pré-filtre avant le formulaire : honnête, sélectif,
   chaleureux. Réutilise le vocabulaire de he-agence-ia-toulouse-v3.css
   (section-light/section-black, hero, sec-head, eyebrow, grad-text,
   btn-primary, btn-ghost, data-reveal). Accent propre : #38BDF8.
   Visuel signature : un tamis / filtre animé (SVG + particules),
   pas l'ADN générique.
   ============================================================ */

:root{ --accent:#38BDF8; }

/* --- HÉRO de page avec son visuel de filtre à droite --- */
.hero-filter{position:relative;min-height:auto;display:flex;align-items:center;
  padding:150px 0 86px;overflow:hidden}
.hero-filter::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(68% 80% at 80% -8%,rgba(56,189,248,.16),transparent 60%),
             radial-gradient(50% 60% at 6% 8%,rgba(37,99,235,.10),transparent 60%)}
.hero-filter .hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,64px);align-items:center}
.hero-filter .hero-copy{max-width:680px}
.hero-filter h1{font-size:clamp(2.3rem,5.2vw,4rem);margin:22px 0 0}
.hero-filter p.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-dim);max-width:640px;margin:26px 0 0}
.hero-filter p.lede b{color:var(--text);font-weight:600}
.hero-filter .hero-actions{margin-top:34px}
.hero-filter .hero-meta{margin-top:42px}
@media(max-width:880px){
  .hero-filter .hero-in{grid-template-columns:1fr}
  .hero-filter .hero-art{order:-1;margin:0 auto 6px;max-width:380px}
}

/* --- VISUEL SIGNATURE : le tamis / filtre (SVG + particules) --- */
.filter-art{position:relative;width:100%;aspect-ratio:1/1;max-width:440px;margin-inline:auto}
.filter-art svg{position:relative;z-index:2;width:100%;height:auto;display:block;overflow:visible}
.filter-art .fa-glow{position:absolute;inset:8% 8% 8% 8%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(56,189,248,.20),transparent 62%);
  filter:blur(6px)}
/* le tamis */
.fa-funnel{fill:none;stroke:url(#fGrad);stroke-width:2.2;stroke-linejoin:round;opacity:.9}
.fa-mesh{stroke:rgba(56,189,248,.32);stroke-width:1.1}
.fa-rim{fill:none;stroke:var(--accent);stroke-width:2.4;opacity:.85}
/* les particules : celles qui passent (bonnes) et celles qui rebondissent */
.fa-dot{fill:var(--accent)}
.fa-dot.pass{animation:fa-fall 3.4s var(--ease-out) infinite}
.fa-dot.pass.d2{animation-delay:.7s}
.fa-dot.pass.d3{animation-delay:1.5s}
.fa-dot.pass.d4{animation-delay:2.2s}
.fa-dot.keep{fill:#60A5FA;animation:fa-pass 4s linear infinite}
.fa-dot.bounce{fill:rgba(166,178,204,.7);animation:fa-bounce 3.1s var(--ease) infinite}
.fa-dot.bounce.b2{animation-delay:1.1s}
.fa-dot.bounce.b3{animation-delay:2s}
/* la goutte validée qui descend sous le tamis */
@keyframes fa-fall{
  0%{transform:translateY(-40px);opacity:0}
  14%{opacity:1}
  60%{transform:translateY(96px);opacity:1}
  100%{transform:translateY(150px);opacity:0}
}
/* particule qui circule le long du col */
@keyframes fa-pass{
  0%,100%{opacity:.25}
  50%{opacity:1}
}
/* particule écartée : elle arrive, touche le bord, repart sur le côté */
@keyframes fa-bounce{
  0%{transform:translate(0,-34px);opacity:0}
  18%{opacity:1}
  46%{transform:translate(0,2px);opacity:1}
  100%{transform:translate(58px,-30px);opacity:0}
}
.fa-ring{fill:none;stroke:rgba(56,189,248,.22);stroke-width:1;
  transform-origin:50% 42%;animation:fa-ring 4.6s ease-out infinite}
@keyframes fa-ring{
  0%{transform:scale(.5);opacity:.5}
  100%{transform:scale(1.25);opacity:0}
}

/* --- BANDEAU sélectif sous le héro --- */
.select-strip{position:relative;z-index:2;border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);background:rgba(8,16,31,.5)}
.select-strip .wrap{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;
  justify-content:center;padding:22px 24px;text-align:center}
.select-strip .ss-item{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-dim)}
.select-strip .ss-item i{color:var(--accent);font-size:1rem}
.select-strip .ss-item b{color:var(--text);font-weight:600;font-family:var(--font-display)}

/* --- DEUX VOIES : "pour qui" (clair) vs "pas pour qui" (lignes) --- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.fit-grid{grid-template-columns:1fr}}

/* colonne POUR QUI (carte claire valorisante) */
.fit-card{position:relative;border-radius:var(--radius);padding:clamp(28px,3.4vw,40px);overflow:hidden;
  background:var(--light-surface);border:1px solid var(--light-line);
  box-shadow:0 18px 40px -30px rgba(15,27,45,.4);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.fit-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:var(--grad-bright);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fit-card:hover{transform:translateY(-5px);border-color:var(--light-line-strong);box-shadow:0 36px 64px -34px rgba(15,27,45,.26)}
.fit-card:hover::before{transform:scaleX(1)}
.fit-card .fit-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:.78rem;color:var(--blue-600);letter-spacing:.02em;
  border:1px solid var(--light-line-strong);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.fit-card .fit-tag i{color:var(--accent)}
.fit-card h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--light-text);margin-bottom:8px}
.fit-card h3 .grad-text{font-weight:600}
.fit-card > p{color:var(--light-dim);font-size:1rem;margin-bottom:22px}
.fit-card > p b{color:var(--light-text);font-weight:600}
.fit-list{list-style:none;display:grid;gap:14px}
.fit-list li{display:flex;gap:13px;align-items:flex-start;color:var(--light-text);font-size:.97rem;line-height:1.5}
.fit-list li i{flex:none;margin-top:2px;font-size:1.1rem;color:var(--blue-600)}
.fit-list li b{font-weight:600}

/* colonne PAS POUR QUI (carte sobre, sans mépris) */
.unfit-card{position:relative;border-radius:var(--radius);padding:clamp(28px,3.4vw,40px);overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
  border:1px solid var(--line);transition:transform .5s var(--ease),border-color .5s}
.unfit-card:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.unfit-card .fit-tag{color:var(--text-mute);border-color:var(--line)}
.unfit-card .fit-tag i{color:var(--text-dim)}
.unfit-card h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--text);margin-bottom:8px}
.unfit-card > p{color:var(--text-dim);font-size:1rem;margin-bottom:22px}
.unfit-card > p b{color:var(--text);font-weight:600}
.unfit-list{list-style:none;display:grid;gap:14px}
.unfit-list li{display:flex;gap:13px;align-items:flex-start;color:var(--text-dim);font-size:.97rem;line-height:1.5}
.unfit-list li i{flex:none;margin-top:2px;font-size:1.05rem;color:var(--text-mute)}
.unfit-list li b{color:var(--text);font-weight:600}

/* --- BLOC "ce filtre, c'est un cadeau" (sombre, large) --- */
.gift-shell{position:relative;border-radius:28px;overflow:hidden;
  padding:clamp(34px,5vw,56px);
  background:linear-gradient(135deg,var(--surface),var(--ink-700));
  border:1px solid var(--line-strong)}
.gift-shell::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 80% at 100% 0%,rgba(56,189,248,.12),transparent 55%)}
.gift-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.gift-card{position:relative;padding:26px 24px;border-radius:14px;
  background:rgba(8,16,31,.55);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .45s}
.gift-card:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.4)}
.gift-card .g-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:1.25rem;margin-bottom:16px;background:var(--grad-soft);
  border:1px solid var(--line-strong);color:var(--blue-300)}
.gift-card h3{font-size:1.12rem;color:var(--text);margin-bottom:8px}
.gift-card p{color:var(--text-mute);font-size:.92rem;line-height:1.55}
.gift-card p b{color:var(--text-dim);font-weight:600}
@media(max-width:820px){.gift-grid{grid-template-columns:1fr}}

/* --- CTA orientation gentille (réseau) — réutilise about-cta --- */
.redirect-note{margin-top:30px;display:flex;gap:14px;align-items:flex-start;
  padding:20px 22px;border-radius:14px;max-width:760px;
  background:rgba(56,189,248,.05);border:1px solid rgba(56,189,248,.2)}
.redirect-note i{flex:none;margin-top:2px;font-size:1.2rem;color:var(--accent)}
.redirect-note p{color:var(--text-dim);font-size:.96rem;line-height:1.55;margin:0}
.redirect-note p b{color:var(--text);font-weight:600}

/* ============================================================
   ACCESSIBILITÉ — on respecte le choix de l'utilisateur
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .fa-dot,.fa-dot.pass,.fa-dot.keep,.fa-dot.bounce,.fa-ring{animation:none!important}
  .fa-dot.bounce{opacity:.6;transform:none}
  .fa-dot.pass{opacity:1;transform:none}
}