/* La recherche sur ordinateur. Les règles du téléphone (mobile-maxx.css, bloc ≤ 900px)
   reprises telles quelles au-delà de 900px — générées, ne pas retoucher à la main :
   on retouche mobile-maxx.css et on relance la reprise — puis la colonne : 720 px,
   centrée, la barre en bas au même gabarit. Avant ce fichier, la page de recherche
   n'avait aucun style sur ordinateur. */
@media (min-width: 901px) {
  .dire-accueil { order: 4; }
  html.dire-actif #view-search .offers-page > :not(#dire) { display: none !important; }
  html.dire-actif #view-search .offers-page { padding-top: 6px; padding-bottom: 140px; min-height: calc(100dvh - 70px); }
  #dire .bulle { scroll-margin-top: 126px; scroll-margin-bottom: 160px; }
  html.dire-actif #dire { min-height: 0; }
  #dire .dire-fil { display: grid; gap: 14px; }
  #dire .bulle { opacity: 0; translate: 0 12px; transition: opacity 420ms ease, translate 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  #dire .bulle.in { opacity: 1; translate: 0 0; }
  #dire .bulle.vous { justify-self: end; max-width: 80%; padding: 11px 16px; border-radius: 20px 20px 6px 20px; background: var(--ink); color: var(--bg); font-size: 15.5px; line-height: 1.4; }
  #dire .bulle.maxx { justify-self: start; width: 100%; }
  #dire .bulle.maxx p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
  #dire .accueil { padding: 40px 0 10px; display: grid; justify-items: start; gap: 18px; }
  #dire .noeud-dire { width: 64px; height: 60px; background: var(--noeud) center / contain no-repeat; animation: splash-nait 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) both, holo-tourne 18s 1200ms linear infinite; }
  #dire .noeud-dire.petit { width: 26px; height: 24px; animation: holo-tourne 1.6s cubic-bezier(0.55, 0.05, 0.25, 1) infinite; }
  #dire .accueil h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
  #dire .exemple, #dire .affine, #dire .etiquette { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  #dire .exemple { animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .exemple:nth-child(2) { animation-delay: 80ms; } #dire .exemple:nth-child(3) { animation-delay: 160ms; }
  #dire .pense { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; min-height: 30px; }
  .dire-barre .compris-direct { grid-column: 1 / -1; grid-row: 1; display: none; align-items: center; gap: 6px; padding: 8px 12px 2px; font-size: 12px; color: var(--muted); }
  .dire-barre .compris-direct span { margin-right: 2px; }
  .dire-barre .compris-direct b { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--paper)); color: var(--accent); font-weight: 500; animation: puce-arrive 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .dire-barre.a-compris { border-radius: 26px; }
  .dire-barre.a-compris .compris-direct { display: flex; flex-wrap: wrap; }
  #dire .resultat { padding: 20px 18px 16px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--ink) 45%, transparent); }
  #dire .compte { margin: 0; display: flex; align-items: baseline; gap: 8px; }
  #dire .compte b { font-family: var(--serif); font-weight: 500; font-size: 54px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; animation: chiffre-nait 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .compte span { font-family: var(--serif); font-size: 22px; color: var(--accent); }
  #dire .sous { margin: 4px 0 12px !important; font-size: 13.5px !important; color: var(--muted) !important; }
  #dire .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  #dire .etiquette { padding: 6px 10px 6px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--bg); border-color: var(--ink); }
  #dire .etiquette i { font-style: normal; opacity: 0.6; }
  #dire .lettre { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--accent); font-family: var(--serif); font-size: 19px; }
  #dire .postuler { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: background 200ms ease, color 200ms ease; }
  #dire .postuler:disabled { background: var(--ink); color: var(--bg); opacity: 1; }
  #dire .plus { width: 100%; margin-top: 4px; padding: 10px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--accent); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
  #dire .affine { font-size: 13px; padding: 7px 12px; }
  #dire .affine em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 2px; }
  .dire-barre {
    position: fixed; left: 16px; right: 16px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); z-index: 60;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 6px 6px 6px 8px;
    border-radius: 999px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--line-strong); box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--ink) 55%, transparent);
    transition: box-shadow 300ms ease, border-color 300ms ease;
  }
  .dire-barre[hidden] { display: none; }
  .dire-barre:focus-within { border-color: var(--accent); }
  .dire-barre input { min-width: 0; border: 0; background: transparent; padding: 10px 6px; font-size: 16px; color: var(--ink); }
  .dire-barre input:focus { outline: 0; }
  .dire-barre input::placeholder { color: var(--muted); }
  .dire-barre .micro, .dire-barre .envoyer { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; }
  .dire-barre .micro { background: transparent; color: var(--ink); }
  .dire-barre .micro[hidden] { display: none; }
  .dire-barre .micro svg, .dire-barre .envoyer svg { width: 20px; height: 20px; }
  .dire-barre .envoyer { background: var(--ink); color: var(--bg); }
  .dire-barre.ecoute { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent), 0 16px 40px -20px color-mix(in srgb, var(--ink) 55%, transparent); animation: ecoute 1.4s ease-in-out infinite; }
  .dire-barre.ecoute .micro { background: var(--accent); color: var(--bg); }
  .dire-accueil {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; margin: 18px 0 10px;
    padding: 6px 6px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent);
    border: 1px solid var(--line-strong); box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--ink) 55%, transparent);
    animation: splash-monte 900ms 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; position: relative;
  }
  .dire-accueil::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--tour, 0deg), transparent 0 60%, var(--accent) 80%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tour 6s linear infinite; opacity: 0.8; pointer-events: none; }
  .dire-accueil button { border: 0; background: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; min-height: 0; }
  .dire-accueil .texte { text-align: left; padding: 10px 4px; font-size: 15.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dire-accueil .micro, .dire-accueil .envoyer { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
  .dire-accueil .micro { color: var(--ink); }
  .dire-accueil .micro[hidden] { display: none; }
  .dire-accueil .envoyer { background: var(--ink); color: var(--bg); }
  .dire-accueil svg { width: 20px; height: 20px; }
  #dire .tout { width: 100%; margin-top: 12px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--ink); color: var(--bg); display: grid; justify-items: start; gap: 2px; text-transform: none; letter-spacing: 0; text-align: left; }
  #dire .tout span { font-size: 15px; font-weight: 600; }
  #dire .tout small { font-size: 12px; opacity: 0.7; }
  #dire .tout:disabled { opacity: 0.7; }
  #dire .sous.tape::after { content: "▍"; color: var(--accent); animation: curseur 800ms steps(1) infinite; }
  #dire .exemple.reprise { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  #dire .lien-dire { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 500; text-decoration: none; font-size: 14px; }
  #dire .bulle.lu { padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: var(--paper); border: 1px solid var(--line); width: auto; max-width: 92%; }
  .dire-barre .completer-dire { padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; min-height: 0; }
  #dire .compte b { font-size: 50px; }
  #dire .lettre { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
  #dire .lettre .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; opacity: 0; transition: opacity 400ms ease; background: #fff; }
  #dire .lettre em { font-style: normal; position: relative; z-index: 1; color: var(--accent); }
  #dire .lettre.a-logo .logo { opacity: 1; }
  #dire .lettre.a-logo em { opacity: 0; }
  #dire .pile { display: flex; align-items: center; margin: 12px 0 10px; }
  #dire .pile .lettre { width: 34px; height: 34px; border-radius: 50%; margin-left: -8px; font-size: 15px; box-shadow: 0 0 0 2px var(--paper); animation: puce-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
  #dire .pile .lettre:first-child { margin-left: 0; }
  #dire .pile .lettre .logo { padding: 5px; }
  #dire .pile .reste { margin-left: 8px; font-size: 12.5px; font-style: normal; color: var(--ink); font-weight: 600; border: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
  #dire .etiquettes .affine { background: transparent; border-style: dashed; }
  html.dire-actif #view-search .offers-page::before { content: ""; position: fixed; inset: -30% -20%; z-index: -1; pointer-events: none; background: radial-gradient(38% 34% at 20% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(30% 30% at 85% 70%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%); animation: aurore 22s ease-in-out infinite alternate; }
  html.dire-actif #view-search .offers-page { position: relative; }
  #dire .accueil .bulle.jour { justify-self: stretch; margin: 2px 0 4px; }
  #dire .bulle.jour { position: relative; overflow: hidden; padding: 16px 18px 14px; border-radius: 22px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--ink) 80%, transparent); }
  #dire .bulle.jour::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 130%; pointer-events: none; background: radial-gradient(40% 50% at 80% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), radial-gradient(30% 40% at 10% 90%, rgba(255, 255, 255, 0.10), transparent 70%); animation: aurore 16s ease-in-out infinite alternate; }
  #dire .bulle.jour > * { position: relative; }
  #dire .bulle.jour p { color: var(--bg); }
  #dire .veille { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
  #dire .veille:empty { display: none; }
  #dire .veille li { animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .exemple.reprise { display: inline-flex; align-items: center; gap: 8px; }
  #dire .exemple.reprise .neuf { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--ink); animation: puce-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #dire .tout { margin: 14px 0 6px; }
  .hero-screen .dire-accueil { display: none !important; }
  #dire .pile, #dire .affine:not(.changer) { display: none !important; }
  #dire .affine.changer { border-style: dashed; }
  /* la barre reste en bas, toujours — comme un chat : on écrit, les offres arrivent au-dessus */
  #dire .bulle.maxx:not(.resultat):not(.pense):not(.reflexion), .voile-filtres .feuille, .voile-rythme .feuille, .home-top-inner {
    position: relative;
    background: var(--verre);
    -webkit-backdrop-filter: blur(34px) saturate(125%); backdrop-filter: blur(34px) saturate(125%);
    border: 1px solid var(--verre-bord);
    border-radius: 30px;
    box-shadow: var(--verre-ombre);
  }
  #dire .bulle.resultat { background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; }
  #dire .bulle.resultat .compte { margin: 0; display: flex; align-items: baseline; gap: 8px; }
  #dire .bulle.resultat .compte .n { font-family: var(--serif); font-size: 48px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
  #dire .bulle.resultat .compte span { font-family: var(--serif); font-size: 26px; color: rgba(20, 20, 22, 0.4); }
  #dire .bulle.resultat .sous { color: var(--muted); font-size: 12.5px; }
  #dire .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  #dire .etiquette, #dire .affine.changer, #dire .affine.filtres { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); font-size: 11.5px; color: var(--ink); text-transform: none; letter-spacing: 0; min-height: 0; }
  #dire .affine.changer { border-style: solid; }
  #dire .affine.filtres { background: var(--ink); color: #fff; border-color: var(--ink); }
  #dire .tout { border-radius: 999px; background: var(--ink); color: #fff; }
  #dire .plus { width: 100%; margin-top: 10px; padding: 12px; border-radius: 999px; background: var(--verre2); border: 1px solid rgba(255, 255, 255, 0.95); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }
  #dire .bulle.maxx:not(.resultat):not(.pense):not(.reflexion) { border-radius: 22px; padding: 14px 16px; }
  .dire-barre { border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); }

  /* ---- la colonne ---- */
  html.dire-actif #view-search .offers-page { max-width: 760px; margin: 0 auto; padding: 96px 20px 140px; }
  #dire { max-width: 720px; margin: 0 auto; }
  html.dire-actif #dire { min-height: 0; }
  .dire-barre { left: 50%; right: auto; width: min(720px, calc(100vw - 40px)); transform: translateX(-50%); bottom: 96px; }
  #dire .bulle.vous { max-width: 70%; }
  #dire .exemple, #dire .etiquette, #dire .affine, #dire .tout, #dire .garder, #dire .plus { cursor: pointer; }
}