/* ===== typewriter.css — mot qui s'écrit puis s'efface =====
 *
 * Même effet que le « Sanchez » du hub (index.html, d'après 21st.dev
 * @danielpetho/typewriter), sorti ici en composant pour que les mondes
 * puissent s'en servir. Différence avec le hub : plusieurs mots, qui
 * défilent chacun leur tour au lieu d'un mot unique qui se répète.
 *
 * ⚠️ Ne pas confondre avec rotate.css : là-bas le mot GLISSE (ressort +
 * flou + balayage), ici il se TAPE lettre par lettre. Deux effets, deux
 * usages — le monde Sport a le premier, l'Immobilier le second.
 *
 * La couleur n'est pas fixée ici : chaque page pose la sienne sur `.tw`.
 */

.tw {
  /* Largeur figée sur le mot le plus long (posée par typewriter.js) : sans
     ça la fin de phrase avance et recule à chaque lettre frappée. */
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

/* ===== Régime PHRASE (`data-tw-wrap`, 15/08/2026) =====
 * Ce qui défile dans le titre de /realestate n'est plus un mot mais une
 * phrase : « un meilleur prix de vente ou de location. » fait 41 signes et ne
 * peut pas tenir sur une ligne — la largeur figée du régime normal la ferait
 * sortir de l'écran à 375 px. Le bloc passe donc à la ligne, et c'est la
 * HAUTEUR de la plus haute phrase que typewriter.js réserve.
 * ⚠️ `display: inline`, et surtout PAS inline-block : la phrase doit s'écrire
 * dans la foulée du mot qui la précède (« Obtenez un meilleur prix… »), pas
 * commencer sa propre ligne. Un inline-block s'y serait dimensionné sur
 * l'espace RESTANT de la ligne — le piège déjà rencontré sur `.rot`.
 * ⚠️ N'ayant pas de hauteur à lui, un élément en ligne ne peut pas porter la
 * réserve : c'est typewriter.js qui la pose sur son PARENT. Le régime suppose
 * donc que la phrase termine ce parent. */
.tw[data-tw-wrap] {
  display: inline;
  white-space: normal;
}

/* ⚠️ LE CURSEUR NE COMPTE PLUS DANS LE RETOUR À LA LIGNE, et ce n'est pas une
   coquetterie : mesuré à 360 px, « un meilleur prix de vente ou de location. »
   tient sur DEUX lignes, mais le « _ » ajouté au bout en réclame une
   TROISIÈME. La réserve valant deux lignes, le texte sous le titre était
   repoussé au dernier caractère frappé — le saut même que la réserve existe
   pour empêcher. Une largeur nulle et un débord visible : le trait se peint,
   il ne pousse rien. Vérifié à 360 px : il finit à 338 px sur 360, donc bien
   à l'écran.
   ⚠️ Ne vaut que dans ce régime : en régime normal la ligne ne se coupe
   jamais (`nowrap`), le curseur n'y peut donc rien pousser. */
.tw[data-tw-wrap] .tw-caret {
  display: inline-block;
  width: 0;
  overflow: visible;
}

.tw-caret {
  font-weight: 400;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Sans mouvement : le premier mot reste écrit, le curseur disparaît.
   (typewriter.js ne démarre pas non plus, cf. son garde en tête.) */
@media (prefers-reduced-motion: reduce) {
  .tw-caret { display: none; }
}