/* ============================================================
   FICHIER 2/5
   ta-recherche.css
   Emplacement : my-listing-child/assets/ta-recherche.css
   ============================================================ */

.ta-r{
  --encre:#080d19;
  --panel:#111b2e;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --vert:#53C598;
  --vert-dim:rgba(83,197,152,.10);
  --or:#C2A24B;
  --txt:#e8eef7;
  --txt-2:#9aabc4;
  --txt-3:#5b7093;
  background:var(--encre);
  color:var(--txt);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
}
.ta-r *{box-sizing:border-box}
.ta-r a{text-decoration:none;color:inherit}
.ta-r button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.ta-r :focus-visible,.ta-r-drawer :focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:6px}
.ta-r .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ta-r-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ══ HERO (compact) ══ */
.ta-r-hero{position:relative;overflow:hidden;padding:36px 0 24px;text-align:center}
.ta-r-hero::before{
  content:'';position:absolute;top:-280px;left:50%;transform:translateX(-50%);
  width:900px;height:500px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(83,197,152,.10) 0%,transparent 68%);
  pointer-events:none;
}
.ta-r-hero .ta-r-wrap{position:relative;max-width:800px}
.ta-r-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--vert-dim);border:1px solid rgba(83,197,152,.18);
  border-radius:50px;padding:5px 14px;font-size:12px;font-weight:500;
  color:var(--vert);margin-bottom:14px;
}
.ta-r-dot{width:6px;height:6px;border-radius:50%;background:var(--vert);animation:ta-r-pulse 2.4s infinite}
@keyframes ta-r-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.ta-r-hero h1{
  font-family:'DM Serif Display',Georgia,serif;
  font-size:36px;font-weight:400;line-height:1.15;letter-spacing:-.5px;
  color:#fff;margin:0 0 8px;
}
.ta-r-hero h1 em{font-style:normal;color:var(--vert)}
.ta-r-sub{color:var(--txt-2);font-size:15px;margin:0 auto 20px;max-width:540px}

.ta-r-ai{
  display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--panel);border:1px solid var(--line-2);
  border-radius:14px;padding:8px 8px 8px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.ta-r-ai:focus-within{border-color:rgba(83,197,152,.45);box-shadow:0 0 0 4px rgba(83,197,152,.07)}
.ta-r-spark{color:var(--vert);font-size:18px;line-height:1;flex-shrink:0}
.ta-r-ai input{flex:1;min-width:0;background:none;border:0;color:var(--txt);font-size:15px;padding:10px 0}
.ta-r-ai input:focus{outline:none}
.ta-r-ai input::placeholder{color:var(--txt-3)}
.ta-r-ai button{
  background:var(--vert);color:#06210f;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:10px;flex-shrink:0;transition:.2s;
}
.ta-r-ai button:hover{background:#45b088;box-shadow:0 6px 22px rgba(83,197,152,.28)}
.ta-r-ai button[disabled]{opacity:.55;cursor:wait}

.ta-r-tokens{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:12px;font-size:13px;color:var(--txt-3);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;
}
.ta-r-tokens.is-on{max-height:140px;opacity:1}
.ta-r-tok{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--vert-dim);border:1px solid rgba(83,197,152,.22);
  color:var(--vert);border-radius:8px;padding:5px 11px;
  font-size:12.5px;font-weight:500;
  animation:ta-r-tokin .32s cubic-bezier(.2,.8,.3,1) both;
}
.ta-r-tok .k{color:rgba(83,197,152,.55);font-weight:400}
@keyframes ta-r-tokin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ta-r-examples{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.ta-r-ex{border:1px solid var(--line);border-radius:50px;padding:7px 15px;font-size:12.5px;color:var(--txt-2);transition:.18s}
.ta-r-ex:hover{border-color:rgba(83,197,152,.28);color:var(--vert);background:var(--vert-dim)}

/* ══ BARRE STICKY ══ */
.ta-r-bar{
  position:sticky;top:0;z-index:40;
  background:rgba(8,13,25,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ta-r-bar .ta-r-wrap{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.ta-r-field{
  display:flex;align-items:center;gap:8px;flex:1;min-width:180px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:0 12px;height:44px;
}
.ta-r-field:hover{border-color:var(--line-2)}
.ta-r-ic{color:var(--txt-3);font-size:15px}
.ta-r-field select{flex:1;background:none;border:0;color:var(--txt);font-size:14px;appearance:none;height:100%;cursor:pointer}
.ta-r-field select:focus{outline:none}
.ta-r-field select option{background:var(--panel);color:var(--txt)}
.ta-r-btn-filters{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  border:1px solid var(--line-2);border-radius:10px;font-size:14px;transition:.18s;
}
.ta-r-btn-filters:hover{border-color:rgba(83,197,152,.35);color:var(--vert)}
.ta-r-pill{background:var(--vert);color:#06210f;font-size:11px;font-weight:700;border-radius:50px;padding:1px 7px}
.ta-r-btn-go{background:var(--vert);color:#06210f;font-weight:700;font-size:14px;height:44px;padding:0 24px;border-radius:10px}
.ta-r-btn-go:hover{background:#45b088}

/* ══ RESULTATS ══ */
.ta-r-results{padding:20px 0 60px}
.ta-r-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ta-r-count{font-size:14px;color:var(--txt-2);margin:0}
.ta-r-count b{color:var(--txt);font-weight:500}
.ta-r-sort{background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--txt-2);font-size:13px;padding:8px 12px;appearance:none;cursor:pointer}
.ta-r-sort option{background:var(--panel)}

.ta-r-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.ta-r-chip{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:50px;
  padding:5px 12px;color:var(--txt-2);transition:.15s;
}
.ta-r-chip:hover{border-color:rgba(83,197,152,.35);color:var(--vert)}
.ta-r-clear{font-size:12.5px;color:var(--txt-3);text-decoration:underline;padding:5px 4px}
.ta-r-clear:hover{color:var(--vert)}

.ta-r-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* Cartes v2 : identiques pour toutes les fiches */
.ta-r-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.ta-r-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.ta-r-chead{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.ta-r-av{
  width:58px;height:58px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,255,255,.05);color:var(--txt-3);object-fit:cover;
}
.ta-r-cid{min-width:0}
.ta-r-cid h2{margin:0 0 2px;font-size:16.5px;font-weight:500;letter-spacing:-.2px;line-height:1.3}
.ta-r-cid h2 a:hover{color:var(--vert)}
.ta-r-meta{font-size:12.5px;color:var(--txt-3);margin:0}
.ta-r-exp{color:var(--or)}

/* Temps de reponse : sur toutes les cartes */
.ta-r-rep{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);margin:0 0 11px}
.ta-r-pastille{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--txt-3)}
.ta-r-rep.ok{color:var(--vert)}
.ta-r-rep.ok .ta-r-pastille{background:var(--vert);box-shadow:0 0 8px rgba(83,197,152,.6)}

.ta-r-spe{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ta-r-spe span{font-size:11.5px;color:var(--txt-2);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:3px 9px}
.ta-r-plus{color:var(--txt-3)!important}

/* CTA : deux boutons pleine largeur, identiques partout */
.ta-r-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.ta-r-a-primary{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--vert);color:#06210f;font-weight:700;font-size:13.5px;
  padding:12px 10px;border-radius:10px;transition:.2s;
}
.ta-r-a-primary:hover{background:#45b088;box-shadow:0 6px 20px rgba(83,197,152,.3);color:#06210f}
.ta-r-a-primary .fl{transition:transform .2s}
.ta-r-a-primary:hover .fl{transform:translateX(3px)}
.ta-r-a-ghost{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);font-size:13.5px;font-weight:500;
  padding:12px 10px;border-radius:10px;color:var(--txt-2);transition:.2s;
}
.ta-r-a-ghost:hover{color:var(--txt);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.03)}

/* ══ BLOC DEPOT v2 — bas de liste, accent OR ══ */
.ta-r-deposit2{
  position:relative;overflow:hidden;margin-top:28px;
  background:linear-gradient(120deg,rgba(194,162,75,.14),rgba(83,197,152,.06) 60%,transparent),var(--panel);
  border:1px solid rgba(194,162,75,.35);border-radius:14px;
  padding:24px 26px;
}
.ta-r-deposit2::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--or),var(--vert));
}
.ta-r-d2top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.ta-r-d2badge{
  font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:var(--or);color:#221a05;border-radius:50px;padding:3px 11px;
}
.ta-r-deposit2 h2{margin:0;font-size:19px;font-weight:400;font-family:'DM Serif Display',Georgia,serif;letter-spacing:-.2px}
.ta-r-d2sub{margin:2px 0 16px;font-size:13.5px;color:var(--txt-2);max-width:560px}
.ta-r-d2steps{display:flex;margin-bottom:18px;flex-wrap:wrap}
.ta-r-d2step{flex:1;min-width:160px;display:flex;align-items:center;gap:10px;padding-right:16px}
.ta-r-d2step+.ta-r-d2step{border-left:1px solid var(--line);padding-left:16px}
.ta-r-d2step .n{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--or);
  border:1.5px solid rgba(194,162,75,.45);
}
.ta-r-d2step p{margin:0;font-size:12.5px;color:var(--txt-2);line-height:1.4}
.ta-r-d2step p b{display:block;color:var(--txt);font-weight:500;font-size:13px}
.ta-r-d2acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ta-r-d2cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--or);color:#221a05;font-weight:700;font-size:14px;
  padding:13px 26px;border-radius:10px;transition:.2s;
}
.ta-r-d2cta:hover{filter:brightness(1.08);box-shadow:0 8px 26px rgba(194,162,75,.3);color:#221a05}
.ta-r-d2note{font-size:12px;color:var(--txt-3)}

.ta-r-empty{text-align:center;padding:56px 20px;border:1px dashed var(--line-2);border-radius:12px}
.ta-r-empty h2{margin:0 0 6px;font-size:18px;font-weight:500}
.ta-r-empty p{margin:0 auto 18px;color:var(--txt-2);font-size:14px;max-width:460px}

/* ══ PAGINATION ══ */
.ta-r-pagi{
  display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;justify-content:center;margin-top:32px;
}
.ta-r-pagi a,.ta-r-pagi .num{
  min-width:40px;height:40px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:9px;
  font-size:13.5px;color:var(--txt-2);transition:.15s;
}
.ta-r-pagi a:hover{border-color:rgba(83,197,152,.35);color:var(--vert);background:var(--vert-dim)}
.ta-r-pagi .is-current{background:var(--vert);border-color:var(--vert);color:#06210f;font-weight:700}
.ta-r-pagi .gap{color:var(--txt-3);padding:0 2px;min-width:auto;border:0}

/* ══ MAILLAGE INTERNE ══ */
.ta-r-seo{border-top:1px solid var(--line);padding:44px 0 64px}
.ta-r-seo-bloc{margin-bottom:30px}
.ta-r-seo-bloc:last-child{margin-bottom:0}
.ta-r-seo h2{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-3);font-weight:700;margin:0 0 12px}
.ta-r-links{display:flex;flex-wrap:wrap;gap:7px}
.ta-r-links a{font-size:12.5px;color:var(--txt-2);border:1px solid var(--line);border-radius:7px;padding:5px 11px;transition:.15s}
.ta-r-links a:hover{color:var(--vert);border-color:rgba(83,197,152,.28);background:var(--vert-dim)}
.ta-r-links a .n{color:var(--txt-3);font-size:11px;margin-left:4px}
.ta-r-links a.is-all{color:var(--vert);border-color:rgba(83,197,152,.25)}

.ta-r-combos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ta-r-combo{
  display:flex;flex-direction:column;gap:2px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;transition:.15s;
}
.ta-r-combo:hover{border-color:rgba(83,197,152,.3)}
.ta-r-combo strong{font-size:13px;font-weight:500;color:var(--txt)}
.ta-r-combo span{font-size:11.5px;color:var(--txt-3)}

/* ══ DRAWER ══
   100dvh suit la hauteur reellement visible sur mobile, contrairement
   a 100% qui deborde sous la barre du navigateur. Le z-index passe
   au-dessus de la dockbar du site quelle que soit sa valeur, en
   restant sous la popup de conversion (999999). */
.ta-r-scrim{position:fixed;inset:0;background:rgba(4,7,14,.66);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.25s;z-index:999995}
.ta-r-scrim.is-on{opacity:1;pointer-events:auto}
.ta-r-drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:380px;max-width:92vw;z-index:999996;
  background:#111b2e;border-left:1px solid rgba(255,255,255,.12);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  color:#e8eef7;font-family:'DM Sans',system-ui,sans-serif;
  --panel:#111b2e;--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --vert:#53C598;--txt:#e8eef7;--txt-2:#9aabc4;--txt-3:#5b7093;
}
.ta-r-drawer.is-on{transform:none}
.ta-r-drawer *{box-sizing:border-box}
.ta-r-drawer a{text-decoration:none;color:inherit}
.ta-r-drawer button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.ta-r-drawer form{display:flex;flex-direction:column;height:100%}
.ta-r-dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.ta-r-dhead h2{margin:0;font-size:16px;font-weight:500}
.ta-r-dhead button{color:var(--txt-3);font-size:22px;line-height:1}
.ta-r-dhead button:hover{color:var(--txt)}
.ta-r-dbody{flex:1;overflow-y:auto;padding:6px 20px 20px;-webkit-overflow-scrolling:touch}
.ta-r-grp{padding:18px 0;border-bottom:1px solid var(--line)}
.ta-r-grp:last-child{border-bottom:0}
.ta-r-glabel{display:block;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--txt-3);margin-bottom:11px}
.ta-r-input{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:9px;color:var(--txt);font-size:14px;padding:11px 13px;font-family:inherit;
}
.ta-r-input:focus{outline:none;border-color:rgba(83,197,152,.4)}
.ta-r-input::placeholder{color:var(--txt-3)}
select.ta-r-input{appearance:none;cursor:pointer;padding-right:34px}
select.ta-r-input option{background:var(--panel);color:var(--txt)}
.ta-r-opt{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;font-size:13.5px;color:var(--txt-2);cursor:pointer;transition:.15s}
.ta-r-opt:hover{background:rgba(255,255,255,.03);color:var(--txt)}
.ta-r-opt input{appearance:none;width:17px;height:17px;border:1.5px solid var(--line-2);border-radius:5px;flex-shrink:0;position:relative;cursor:pointer;transition:.15s;margin:0}
.ta-r-opt input[type=radio]{border-radius:50%}
.ta-r-opt input:checked{background:var(--vert);border-color:var(--vert)}
.ta-r-opt input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid #06210f;border-width:0 2px 2px 0;transform:rotate(42deg)}
.ta-r-opt input[type=radio]:checked::after{content:'';position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#06210f}
.ta-r-n{margin-left:auto;font-size:11.5px;color:var(--txt-3)}

/* Le bouton Afficher reste atteignable au-dessus de l'encoche iPhone. */
.ta-r-dfoot{
  display:flex;gap:9px;padding:16px 20px;border-top:1px solid var(--line);
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
.ta-r-apply{flex:1;background:var(--vert);color:#06210f;font-weight:700;font-size:14px;padding:12px;border-radius:10px}
.ta-r-reset{border:1px solid var(--line-2);color:var(--txt-2);font-size:13.5px;padding:12px 18px;border-radius:10px;display:flex;align-items:center}
.ta-r-reset:hover{color:var(--txt)}

/* La dockbar du site disparait tant que le panneau est ouvert. */
body.ta-r-drawer-open .ta-dockbar{display:none!important}

/* ══ BOUTON FLOTTANT MOBILE ══
   La dockbar du site (~74px) occupe le bas de l'ecran sur cette
   page : le bouton se cale juste au-dessus. */
.ta-r-fab{
  display:none;position:fixed;left:50%;bottom:88px;transform:translateX(-50%);
  z-index:9997;background:#53C598;color:#06210f;font-weight:700;font-size:14px;
  padding:12px 24px;border-radius:50px;box-shadow:0 8px 28px rgba(0,0,0,.5);
  align-items:center;gap:8px;font-family:'DM Sans',sans-serif;border:0;cursor:pointer;
}
.ta-r-fab.is-on{display:flex}
.ta-r-fab .ta-r-pill{background:#06210f;color:#53C598}
.ta-r-fab.no-dock{bottom:20px}

/* ══ TABLETTES ══ */
@media(max-width:1024px){
  .ta-r-combos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ta-r-card{padding:16px}
  .ta-r-hero h1{font-size:31px}
}

/* ══ MOBILE ══ */
.ta-r-mobile-seul{display:none}

@media(max-width:860px){
  .ta-r-hero{padding:22px 0 16px}
  .ta-r-hero h1{font-size:24px}
  .ta-r-hero h1 br{display:none}
  .ta-r-sub{font-size:13.5px;margin-bottom:16px}
  /* Trois exemples suffisent sur petit ecran. */
  .ta-r-ex:nth-child(n+4){display:none}

  /* iOS Safari zoome sur tout champ dont la police est sous 16px. */
  .ta-r-ai input,
  .ta-r-field select,
  .ta-r-input,
  select.ta-r-input,
  .ta-r-sort{font-size:16px}

  /* La barre du haut cesse d'etre collante : elle occupait deux lignes
     en permanence. Le bouton flottant prend le relais. */
  .ta-r-bar{position:static}
  .ta-r-bar .ta-r-wrap{padding-top:10px;padding-bottom:10px}
  .ta-r-field{min-width:100%;flex:1 1 100%;height:48px}
  .ta-r-btn-filters,.ta-r-btn-go{height:48px;flex:1 1 calc(50% - 5px)}
  .ta-r-btn-filters{justify-content:center}

  /* Les selecteurs domaine / departement rejoignent le panneau. */
  .ta-r-mobile-seul{display:block}

  .ta-r-grid,.ta-r-combos{grid-template-columns:1fr}
  .ta-r-card{padding:16px}
  .ta-r-av{width:48px;height:48px}
  .ta-r-deposit2{padding:20px 18px}
  .ta-r-d2steps{flex-direction:column;gap:10px}
  .ta-r-d2step{padding-right:0}
  .ta-r-d2step+.ta-r-d2step{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:10px}
  .ta-r-d2cta{width:100%;justify-content:center}

  .ta-r-pagi .lbl{display:none}
  .ta-r-pagi a,.ta-r-pagi .num{min-width:42px;height:42px;padding:0 10px}

  .ta-r-drawer{width:100%;max-width:100%}
  .ta-r-head{gap:10px}
  .ta-r-count{width:100%}
  .ta-r-results{padding-top:14px}
}

@media(max-width:520px){
  .ta-r-hero h1{font-size:22px}
  .ta-r-ai{padding:6px 6px 6px 12px;border-radius:12px}
  .ta-r-ai button{padding:11px 14px}
  .ta-r-examples{gap:6px}
  .ta-r-ex{padding:6px 12px;font-size:12px}
  .ta-r-av{width:44px;height:44px;font-size:14px}
  .ta-r-acts a{padding:11px 8px;font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .ta-r *,.ta-r-drawer,.ta-r-scrim{animation:none!important;transition:none!important}
}