/* « Recherche sur téléphone, votre entreprise introuvable » (page /offre).
   Repris de la fiche bibliotheque-motion/motion-library/recherche-telephone-introuvable.
   Un téléphone stylisé, sans marque : la recherche s'écrit, des résultats
   neutres arrivent (sans nom ni note), la carte « Votre entreprise » tremble.
   Le rythme est piloté par /takumea/anim/recherche.js (temps écoulé). */

.rq-deux { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.rq-texte { max-width: 620px; }
.rq-texte h2 { font-size: clamp(30px, 3.4vw, 46px); }
.rq-texte p { color: var(--gris); font-size: 19px; line-height: 1.55; margin: 20px 0 0; max-width: 44ch; }

/* ---------- Le téléphone stylisé ---------- */
.rq-tel {
  box-sizing: border-box; width: 300px; max-width: 100%; height: 430px; border-radius: 36px; border: 10px solid #2C2C2C;
  background: var(--blanc, #FBF9F4); color: #2B2B2B; padding: 22px 16px; display: grid; align-content: start; gap: 16px; text-align: left;
  box-shadow: 0 30px 60px -24px rgba(26, 26, 26, .45), 0 2px 0 rgba(255, 255, 255, .6) inset;
}
.rq-barre { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 22px; background: #fff; border: 1px solid #DDD7CC; font: 500 15px/1.25 var(--texte); color: #2B2B2B; }
.rq-requete { min-width: 0; overflow-wrap: anywhere; }
.rq-loupe { flex: none; width: 13px; height: 13px; border: 2px solid #8A847A; border-radius: 50%; position: relative; }
.rq-loupe::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: #8A847A; transform: rotate(45deg); }
.rq-curseur { flex: none; width: 1.5px; height: 18px; background: var(--accent); animation: rq-clin 1s steps(1) infinite; }
@keyframes rq-clin { 50% { opacity: 0; } }

/* Les résultats : des cartes grises, sans nom ni note */
.rq-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rq-resultats li { background: #fff; border: 1px solid #E6E0D5; border-radius: 12px; padding: 12px; display: grid; gap: 7px; opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.rq-resultats b { display: block; height: 11px; width: 62%; border-radius: 6px; background: #CFC8BB; }
.rq-resultats i { display: block; height: 7px; border-radius: 4px; background: #E8E3D9; }
.rq-resultats i.rq-court { width: 55%; }
.rq-trouve .rq-resultats li { opacity: 1; transform: none; }
.rq-trouve .rq-resultats li:nth-child(2) { transition-delay: .35s; }
.rq-trouve .rq-resultats li:nth-child(3) { transition-delay: .7s; }

/* La dernière carte : votre entreprise, introuvable, qui tremble */
.rq-resultats .rq-absent { background: transparent; border: 1.5px dashed var(--accent); text-align: center; padding: 16px 12px; display: block; }
.rq-trouve .rq-resultats .rq-absent { transition-delay: 1.5s; animation: rq-non .5s ease 2.2s; }
.rq-absent span { display: block; font: 600 15px/1.2 var(--display); color: var(--encre); }
.rq-absent small { display: block; margin-top: 5px; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8E4F27; }
@keyframes rq-non { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Remise à zéro sans animation (quand la section revient à l'écran) */
.rq-net .rq-resultats li { transition: none !important; animation: none !important; }

/* Téléphone : le téléphone stylisé en haut, le texte dessous */
@media (max-width: 900px) {
  .rq-deux { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rq-tel { justify-self: center; height: 410px; }
  .rq-texte { max-width: 560px; }
  .rq-texte p { font-size: 18px; }
}

/* Mouvement réduit : tout est affiché d'un coup, rien ne bouge */
.calme .rq-resultats li { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
.calme .rq-curseur { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rq-resultats li { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .rq-curseur { animation: none; }
}